效果展示：
代码如下：
<!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: 0; padding: 0; } li { list-style: none; } #div1, #div2 { float: left; 400px; height: 400px; border: 1px #000000 solid; margin: 10px; position: relative; overflow: hidden; } #div2 ul { position: absolute; left: 0; 2000px; } #div2 ul .box { 400px; height: 400px; float: left; overflow: hidden; } #div2 #childUl { 400px; } #childUl li { 400px; border-bottom: 1px #666666 dashed; } #map { 100%; 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') || 0; var oChildUl = document.getElementById('childUl'); var aChildLi = oChildUl.getElementsByTagName('li'); var oUl = document.getElementById('ul1'); var aBox = oUl.getElementsByClassName('box'); var aBox1_input = aBox[1].getElementsByTagName('input'); var aBox1_div = aBox[1].getElementsByTagName('div'); var oBox2_input = aBox[2].getElementsByTagName('input')[0]; var index = 0; //窗体加载时就展示数据 if( window.localStorage.getItem('num') ){ for(var i=0;i<iNow;i++){ var oLi = document.createElement('li'); oLi.innerHTML = window.localStorage.getItem('title'+i); oChildUl.appendChild( oLi ); } changeLi(); } aInput[1].onclick = function(){ //保存本地 window.localStorage.setItem('title'+iNow,aInput[0].value); window.localStorage.setItem('ta'+iNow,oT.value); createLi(); iNow++; window.localStorage.setItem('num',iNow); }; aInput[2].onclick = function(){ //提交后台 }; aInput[3].onclick = function(){ //删除所有的数据 window.localStorage.clear(); }; aInput[4].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=0;i<aChildLi.length;i++){ aChildLi[i].index = i; aChildLi[i].onclick = function(){ startMove(oUl,{left : -aBox[0].offsetWidth }); aBox1_div[0].innerHTML = window.localStorage.getItem('title'+this.index); aBox1_div[1].innerHTML = window.localStorage.getItem('ta'+this.index); if( window.localStorage.getItem('y'+this.index) ){ aBox1_input[1].disabled = false; } else{ aBox1_input[1].disabled = true; } index = this.index; }; } } aBox1_input[0].onclick = function(){ startMove(oUl,{left : 0}); }; aBox1_input[1].onclick = function(){ startMove(oUl,{left : -2*aBox[0].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,15); map.enableScrollWheelZoom(); var marker1 = new BMap.Marker(point); map.addOverlay(marker1); var opts = { width : 250, // 信息窗口宽度 height: 100, // 信息窗口高度 title : title // 信息窗口标题 } var infoWindow = new BMap.InfoWindow(text, opts); map.openInfoWindow(infoWindow,point); }; oBox2_input.onclick = function(){ startMove(oUl,{left : -aBox[0].offsetWidth }); }; }; </script> </head> <body> <div id="div1"> 标题:<input type="text" /><br /> 内容:<textarea id="t1" style="height:300px; 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