效果展示：

代码如下：

<!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. Dreamweaver 制作图片热点之后，点击热点部分会有个提示框，怎么去掉

    可以这么写试试看<map name="Map"> <area shape="rect" coords="364,31,517,64& ...

  2. Centos7 配置网络步奏详解

    Centos7 配置网络步奏详解 编辑网卡配置文件 vi /etc/sysconfig/network-script/ifcfg-ens01 备注:这里的ens01不是所有系统都叫这个,有的可能叫其他 ...

  3. java帮助文档下载

    JAVA帮助文档全系列 JDK1.5 JDK1.6 JDK1.7 官方中英完整版下载JDK(Java Development Kit,Java开发包,Java开发工具)是一个写Java的applet和 ...

  4. C++ new(2)

    1. new与operator new C++中有很多语法让人难以理解,如:new operator(操作符,下同)和operator new之间差异,确切的说,应该是new与operator new ...

  5. 【MVC 4】7.SportsSore：完成购物车

    作者:[美]Adam Freeman      来源:<精通ASP.NET MVC 4> 本文将继续构建 SportsStore 示例应用程序.在上一章中,添加了对购物车的基本支持,现在打 ...

  6. tarjan算法求割点cojs 8

    tarjan求割点:cojs 8. 备用交换机 ★★   输入文件:gd.in   输出文件:gd.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] n个城市之间有通讯网 ...

  7. 孙鑫视频学习：VS2010中找不到【Tab order】菜单项

    在学习孙鑫视频中,修改Tab顺序时,找不到VC6.0中提到的[Layout]->[Tab order]菜单项,但VC2010中可以用Ctrl+D调出来Tab顺序,或者[格式]->[Tab键 ...

  8. Android优化——UI优化（三）使用ViewStub延迟加载

    使用ViewStub延迟加载 1.ViewStub延迟加载 ViewStub是一个不可见的,大小为0的View,最佳用途就是实现View的延迟加载,在需要的时候再加载View,可Java中常见的性能优 ...

  9. Linux Linux程序练习九

    题目:利用多线程与有名管道技术,实现两个进程之间发送即时消息,实现聊天功能 思路:关键在于建立两个有名管道,利用多线程技术,进程A中线程1向管道A写数据,进程B中线程2从管道A读数据,进程A线程2从管 ...

  10. SQL SERVER with递归示例一则

    WITH SUBQUERY AS ( SELECT ORGID FROM OM_ORGANIZATION WHERE PARENTORGID = 'ROOT' UNION ALL SELECT B.O ...