效果展示：

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <!--定义样式-->

    <style>

        * {

            margin: ;

            padding: ;

        }

        li {

            list-style: none;

        }

        #div1, #div2 {

            float: left;

            width: 400px;

            height: 400px;

            border: 1px # solid;

            margin: 10px;

            position: relative;

            overflow: hidden;

        }

            #div2 ul {

                position: absolute;

                left: ;

                width: 2000px;

            }

                #div2 ul .box {

                    width: 400px;

                    height: 400px;

                    float: left;

                    overflow: hidden;

                }

            #div2 #childUl {

                width: 400px;

            }

        #childUl li {

            width: 400px;

            border-bottom: 1px # dashed;

        }

        #map {

            width: %;

            height: 380px;

        }

    </style>

    <script src="scripts/move.js"></script>

    <script src="http://api.map.baidu.com/api?v=1.3"></script>

    <script>

window.onload = function(){

    var oDiv = document.getElementById('div1');

    var aInput = oDiv.getElementsByTagName('input');

    var oT = document.getElementById('t1');

    var iNow = window.localStorage.getItem('num') || ;

    var oChildUl = document.getElementById('childUl');

    var aChildLi = oChildUl.getElementsByTagName('li');

    var oUl = document.getElementById('ul1');

    var aBox = oUl.getElementsByClassName('box');

    var aBox1_input = aBox[].getElementsByTagName('input');

    var aBox1_div = aBox[].getElementsByTagName('div');

    var oBox2_input = aBox[].getElementsByTagName('input')[];

    var index = ;

    //窗体加载时就展示数据

    if( window.localStorage.getItem('num') ){

        for(var i=;i<iNow;i++){

            var oLi = document.createElement('li');

            oLi.innerHTML = window.localStorage.getItem('title'+i);

            oChildUl.appendChild( oLi );

        }

        changeLi();

    }

    aInput[].onclick = function(){  //保存本地

        window.localStorage.setItem('title'+iNow,aInput[].value);

        window.localStorage.setItem('ta'+iNow,oT.value);

        createLi();

        iNow++;

        window.localStorage.setItem('num',iNow);

    };

    aInput[].onclick = function(){ //提交后台

    };

    aInput[].onclick = function(){ //删除所有的数据

        window.localStorage.clear();

    };

    aInput[].onclick = function(){

        var This = this;

        navigator.geolocation.getCurrentPosition(function(position){

            var y = position.coords.longitude;

            var x = position.coords.latitude;

            if( This.checked ){

                window.localStorage.setItem('y'+iNow,y);

                window.localStorage.setItem('x'+iNow,x);

            }

            else{

                window.localStorage.removeItem('y'+iNow);

                window.localStorage.removeItem('x'+iNow);

            }

        });

    };

    function createLi(){

        var oLi = document.createElement('li');

        oLi.innerHTML = window.localStorage.getItem('title'+iNow);

        oChildUl.appendChild( oLi );

        changeLi();

    }

    function changeLi(){

        for(var i=;i<aChildLi.length;i++){

            aChildLi[i].index = i;

            aChildLi[i].onclick = function(){

                startMove(oUl,{left : -aBox[].offsetWidth });

                aBox1_div[].innerHTML = window.localStorage.getItem('title'+this.index);

                aBox1_div[].innerHTML = window.localStorage.getItem('ta'+this.index);

                if( window.localStorage.getItem('y'+this.index) ){

                    aBox1_input[].disabled = false;

                }

                else{

                    aBox1_input[].disabled = true;

                }

                index = this.index;

            };

        }

    }

    aBox1_input[].onclick = function(){

        startMove(oUl,{left : });

    };

    aBox1_input[].onclick = function(){

        startMove(oUl,{left : -*aBox[].offsetWidth});

        var map = new BMap.Map("map");

        var y = window.localStorage.getItem('y'+index);

        var x = window.localStorage.getItem('x'+index);

        var title = window.localStorage.getItem('title'+index);

        var text = window.localStorage.getItem('ta'+index);

        var point = new BMap.Point(y, x);

        map.centerAndZoom(point,);

        map.enableScrollWheelZoom();

        var marker1 = new BMap.Marker(point);

        map.addOverlay(marker1);

        var opts = {

          width : ,     // 信息窗口宽度

          height: ,     // 信息窗口高度

          title : title  // 信息窗口标题

        }

        var infoWindow = new BMap.InfoWindow(text, opts);

        map.openInfoWindow(infoWindow,point);

    };

    oBox2_input.onclick = function(){

        startMove(oUl,{left : -aBox[].offsetWidth });

    };

};

    </script>

</head>

<body>

    <div id="div1">

        标题:<input type="text" /><br />

        内容:<textarea id="t1" style="height:300px; width:300px;"></textarea><br />

        <input type="button" value="保存本地" />

        <input type="button" value="同步服务器" />

        <input type="button" value="删除所有数据" />

        <input type="checkbox" />记录地图位置

    </div>

    <div id="div2">

        <ul id="ul1">

            <li class="box">

                <ul id="childUl"></ul>

            </li>

            <li class="box">

                <input type="button" value="后退" />

                <input style="float:right" type="button" value="前进" />

                <div></div>

                <div></div>

            </li>

            <li class="box">

                <input type="button" value="后退" />

                <div id="map"></div>

            </li>

        </ul>

    </div>

</body>

</html>

move.js文件下载：http://pan.baidu.com/s/1nvs3uGh

HTML5——行走日记的更多相关文章

  1. 微信小程序开发日记——高仿知乎日报（上）

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  2. HTML5笔记1——HTML5的发展史及标签的改变

    记得第一次接触HTML5还是在<联信永益>实习那会儿(2011),当时一个项目技术选型的时候面临两种选择,分别是Silverlight和HTML5,那是用的最新的IE浏览器版本还是IE9, ...

  3. 08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...

  4. 精选9个值得学习的 HTML5 效果【附源码】

    这里精选了一组很酷的 HTML5 效果.HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强.效 ...

  5. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  6. 结合 CSS3 & Canvas 模拟人行走的效果

    HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情.所谓只有想不到,没有做不到,的确如此.下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的 ...

  7. HTML5 Geolocation 构建基于地理位置的 Web 应用

    HTML5 中的新功能 HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中.自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML5 的到 ...

  8. html5游戏引擎phaser官方示例学习

    首发:个人博客,更新&纠错&回复 phaser官方示例学习进行中,把官方示例调整为简明的目录结构,学习过程中加了点中文注释,代码在这里. 目前把官方的完整游戏示例看了一大半, brea ...

  9. 8款超酷的HTML5 3D图片动画源码

    1.HTML5移动端图片左右切换动画 今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款 ...

随机推荐

  1. 限制input输入类型(多种方法实现)

    1.只能输入和粘贴汉字 <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste= ...

  2. JAVA如何随机生成一个汉字

    package com.test; import java.math.BigDecimal; import java.math.RoundingMode; import java.util.Rando ...

  3. readonly与const

    readonly与const 在C#中,readonly 与 const 都是定义常量,但不同之处在于:readonly 是运行时常量,而 const 是编译时常量. ; public void Te ...

  4. HDU 4793 Collision --解方程

    题意: 给一个圆盘,圆心为(0,0),半径为Rm, 然后给一个圆形区域,圆心同此圆盘,半径为R(R>Rm),一枚硬币(圆形),圆心为(x,y),半径为r,一定在圆形区域外面,速度向量为(vx,v ...

  5. CPU相关知识－寄存器与存储器的区别

    存储器一般在CPU外,一般指硬盘,U盘等可以在切断电源后保存资料的设备,容量一般比较大,缺点是读写速度都很慢,普通的机械硬盘读写速度一般是 50MB/S左右.内存和寄存器就是为了解决存储器读写速度慢而 ...

  6. 使用EditText+ListView并结合TextWatcher实现输入关键字筛选数据

    想必大家应该遇到过这样的情况,当点击Spinner控件后弹出的列表内容超多,一个一个滑动着去寻找所要的项很麻烦,尤其是当自己知道想要选择的内容,这时候如果我们只需要输入某些关键字,就可以讲上百条数据筛 ...

  7. EasyUI概述

    EasyUI是基于jQuery的一套UI框架,主要应用场景是后台管理系统的UI开发. 其提供了以下几个模块的插件 1.布局 2.菜单与按钮 3.表单 4.窗口 可以让开发人员,特别是后端开发人员,在不 ...

  8. 16Spring_AOP编程(AspectJ)_最终通知

  9. Android应用性能优化之使用SparseArray替代HashMap

    HashMap是java里比较常用的一个集合类,我比较习惯用来缓存一些处理后的结果.最近在做一个Android项目,在代码中定义这样一个变量,实例化时,Eclipse却给出了一个 performanc ...

  10. R语言利器之ddply和aggregate

    ddply和aggregate是两个用来整合数据的功能强大的函数. aggregate(x, ...) 关于aggregate()函数的使用在<R语言实战>中P105有简单描述,这里重新说 ...