效果展示：

代码如下：

<!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. [转]Oracle分页之三：利用PagerView来实现无刷新GridView

    本文转自:http://www.cnblogs.com/scy251147/archive/2011/04/16/2018355.html 接上面一节,上面还存在问题就是分页控件使用的仍然是服务器端控 ...

  2. Jenkins插件hyper slaves源码分析

    1.public class HyperSlaves extends Plugin implements Describable<HyperSlaves> (1).init():初始化co ...

  3. LeetCode 2 Add Two Sum 解题报告

    LeetCode 2 Add Two Sum 解题报告 LeetCode第二题 Add Two Sum 首先我们看题目要求: You are given two linked lists repres ...

  4. python中for和if else的使用

    In []: a = set('abcd') In []: b = set('ef') In []: def match(x,y): ....: for i in x: ....: for j in ...

  5. 用js判断时间的先后顺序

    我们在用户注册信息的时候,有时根据需要往往要加入一些时间上的判断,今天我在这里给大家推荐一款比较实用的时间先后顺序判断的代码,希望对大家有所有帮助. <!DOCTYPE HTML> < ...

  6. Unity 协程与线程

    协程是不同步的 协程 不是 线程,协同程序是 不同步 的 一个线程在程序中和其他线程是异步运行的,在多处理器机器中一个线程可以同时与所有其他线程的实时运行其代码,这使得线程编程能够解决很复杂的事情,因 ...

  7. 一个简单的python爬虫，以豆瓣妹子“http://www.dbmeizi.com/category/2?p= ”为例

    本想抓取网易摄影上的图,但发现查看html源代码时找不到图片的url,但firebug却能定位得到.(不知道为什么???) 目标是抓取前50页的爆乳图,代码如下: import urllib2,url ...

  8. 在Function对象上扩展method方法

    ;(function() { /** * 在Function对象上扩展method方法 * @param {String} name 扩展的方法名称 * @param {Function} callb ...

  9. 【转】【Thread】ReaderWriterLock 读写锁

    ReaderWriterLock类 通常来讲,一个类型的实例对于并行的读操作是线程安全的,但是并行地更新操作则不是(并行地读和更新也不是). 这对于资源也是一样的,比如一个文件.当保护类型的实例安全时 ...

  10. 【转】【C#】C# 不常用关键字

    1.__arglist 让我们先从__arglist开始. __arglist是用来给方法传送参数.通常我们是通过函数头部指定的参数列表给方法传递参数的.如果我们想要给方法传递一组新的参数,我们需要重 ...