效果展示：

代码如下：

<!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. Android 开发框架

    Android 开发框架包括基本的应用功能开发.数据存储.网络访问三大块. 1 应用方面 一般而言,一个标准的Android 程序包括Activity.Broadcast Intent Receive ...

  2. [分享]4412开发板Android教程——Android开发环境搭建

    分享视频链接:http://pan.baidu.com/s/1o6tgEeQ 本文转载:www.topeetboard.com 下载和安装Android应用的开发环境 新建Android虚拟环境 An ...

  3. Flume practices and sqoop hive 2 oracle

    #receive the file flume-ng agent --conf conf --conf-file conf1.conf --name a1 flume-ng agent --conf ...

  4. 【Android 基础】Android中全屏或者取消标题栏

    先介绍去掉标题栏的方法: 第一种:也一般入门的时候经常使用的一种方法 requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏 注意这句一定要写在se ...

  5. 第17章 内存映射文件（3）_稀疏文件(Sparse File)

    17.8 稀疏调拨的内存映射文件 17.8.1 稀疏文件简介 (1)稀疏文件(Sparse File):指的是文件中出现大量的0数据,这些数据对我们用处不大,但是却一样的占用空间.NTFS文件系统对此 ...

  6. 新手须知 C、C++和VC++之间的区别

    本文目地 本文介绍的是C.C++.VC++ 三者之间的区别,也许作为初学者来说,会很容易混淆.希望通过本文的介绍,能够给你带来帮助. C语言 C语言是一种古老而又经久不衰的计算机程序设计语言,大约诞生 ...

  7. Highlighting System

    Highlighting System 法线贴图漫反射着色器 Unity论坛:http://forum.unity3d.com/threads/143043-Highlighting-System-R ...

  8. Eclipse快捷键列表大全

    from: http://hi.baidu.com/lzycsd/item/c6febccceacc173c44941684 from: http://www.open-open.com/bbs/vi ...

  9. 3016 质子撞击炮 II

    3016 质子撞击炮 II  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description [抱歉数据错误~~已修 ...

  10. ASP.NET MVC3 Model验证总结（转）

    推荐:   ASP.NET MVC的Model元数据与Model模板:预定义模板 http://www.cnblogs.com/artech/archive/2012/05/02/model-meta ...