<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="http://api.map.baidu.com/api?v=2.0&ak=38eb639e879917744ea99da35bd1648a"></script>
<script src="jquery-1.7.2.js"></script>
<script src="move.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.clear {
clear: both;
}
#record {
padding: 10px;
float: left;
border: 1px solid red;
margin-right: 2px;
}
#record input[name=title] {
height: 30px;
200px;
outline: none;
font-size: 16px;
}
#record textarea[name=content] {
height: 400px;
300px;
outline: none;
resize: none;
font-size: 16px;
}
#record p label {
float: left;
margin-right: 5px;
}
#detile {
300px;
border: 1px solid red;
position: relative;
overflow: hidden;
left: 0px;
top: 0;
}
#list {
900px;
position: relative;
height: 480px;
left: 0px;
}
#list li {
300px;
height: 200px;
float: left;
}
#list li:first-child div {
border-bottom: 1px dashed red;
height: 26px;
line-height: 25px;
filter: alpha(opacity=0);
opacity: 0;
cursor: pointer;
}
#list li:nth-child(2) div #Go {
float: right;
}
#list li:nth-child(2) input[name=title] {
height: 30px;
200px;
outline: none;
font-size: 16px;
border: none;
}
#list li:nth-child(2) textarea[name=content] {
height: 460px;
300px;
outline: none;
resize: none;
font-size: 16px;
border: none;
border-top: 1px solid #e6dcdc;
}
#map {
300px;
height: 480px;
}
</style>
</head>
<body>
<div id="record">
<form id="fr">
<p>
标题：
<input type="text" name="title" />
</p>
<p>
<label>内容：</label>
<textarea name="content"></textarea>
</p>
</form>
<button id="save_local">保存本地</button>
<button id="save_server">保存服务器</button>
<button id="del">删除所有数据</button>
<input type="checkbox" id="Get_map" />记录地图位置
</div>
<div id="detile">
<ul id="list">
<li></li>
<li>
<div>
<input type="button" id="back" value="后退" />
<input type="button" id="Go" value="前进" />
</div>
<input type="text" name="title" />
<textarea name="content"></textarea>
</li>
<li>
<input type="button" id="back2" value="后退" />
<div id="map"></div>
</li>
</ul>
</div>
</body>
</html>
<script>
var iNow = window.localStorage.getItem('num') || -1;
var oUl = document.getElementById('list');
var aLi = oUl.getElementsByTagName('li');
$(document).ready(function () {
if (window.localStorage.getItem('num')) {
var list = arr(window.localStorage);
//console.log(window.localStorage)
for (var i = 0; i < list.length; i++) {
if (isContains(list[i].name, 'title')) {
var oDiv = document.createElement('div');
oDiv.index = list[i].name.split('|')[1];
oDiv.innerHTML = window.localStorage.getItem(list[i].name);
AppOrInsertChild(aLi[0], oDiv);
}
}
}
//var aDiv = aLi[0].getElementsByTagName('div');
//for (var i = 0; i < aDiv.length; i++) {
// aDiv[i].onmouseover = function () {
// this.style.cssText = 'background:red;color:#FFF';
// }
// aDiv[i].onmouseleave = function () {
// this.style.cssText = 'background:#FFF;color:#000';
// }
// aDiv[i].onclick = function (ev) {
// //console.log(this.index)
// var oTitle = $('#list li').eq(1).find('input[name=title]');
// oTitle.val(this.textContent);
// var oContent = $('#list li').eq(1).find('[name=content]');
// oContent.val(window.localStorage.getItem('content|' + this.index));
// StartMove(oUl, { left: -aLi[0].offsetWidth });
// }
//}
aLi[0].onmouseover = function (ev) {
var ev = ev || event;
var target = ev.target || ev.srcElement;
// console.log(target.index);
if (target.nodeName.toLowerCase() == 'div')
//target.style.cssText = 'background:red;color:#FFF';
{target.style.background='red';
target.style.color='#FFF';}
}
aLi[0].onmouseout = function (ev) {
var ev = ev || event;
var target = ev.target || ev.srcElement;
// console.log(target.index);
if (target.nodeName.toLowerCase() == 'div')
{
//target.style.cssText = 'background:#FFF;color:#000';
target.style.background='#FFF';
target.style.color='#000';}
}
aLi[0].onclick = function (ev) {
var ev = ev || event;
var target = ev.target || ev.srcElement;
if (target.nodeName.toLowerCase() == 'div') {
var oTitle = $('#list li').eq(1).find('input[name=title]');
oTitle.val(target.textContent);
var oContent = $('#list li').eq(1).find('[name=content]');
oContent.val(window.localStorage.getItem('content|' + target.index));
if (window.localStorage.getItem('Get_map|' + target.index)) {
//alert(11);
$('#Go').get(0).disabled = false;
} else {
$('#Go').get(0).disabled = true;
}
StartMove(oUl, { left: -this.offsetWidth });
}
}
});
$('#save_local').click(function () {
var json = $('#fr').serializeArray();
iNow++;
window.localStorage.setItem(json[0].name + '|' + iNow, json[0].value);
window.localStorage.setItem(json[1].name + '|' + iNow, json[1].value);
window.localStorage.setItem('num', iNow);
var isok = $('#Get_map').is(':checked');
navigator.geolocation.getCurrentPosition(function (position) {
var y = position.coords.longitude;
var x = position.coords.latitude;
var json = { y: y, x: x };
if (isok)
{ window.localStorage.setItem('Get_map|' + iNow, JSON.stringify(json)); }
else
{ window.localStorage.removeItem('Get_map|' + iNow); }
});
createDiv(json);
$('#Get_map').get(0).checked = false;
});
$('#del').click(function () {
window.localStorage.clear();
if (aLi[0].childNodes.length > 0) {
for (var i = 0; i < aLi[0].childNodes.length; i++) {
aLi[0].removeChild(aLi[0].childNodes[i]);
}
window.location.reload();
}
});
$('#back').click(function () {
StartMove(oUl, { left: 0 });
});
$('#back2').click(function () {
StartMove(oUl, { left: -aLi[0].offsetWidth });
});
$('#Go').click(function () {
StartMove(oUl, { left: -aLi[0].offsetWidth * 2 });
var m = JSON.parse(window.localStorage.getItem('Get_map|' + iNow));
var map = new BMap.Map("map");
var pt = new BMap.Point(m.y, m.x);
map.centerAndZoom(pt, 14);
map.enableScrollWheelZoom();
var marker2 = new BMap.Marker(pt); // 创建标注
map.addOverlay(marker2);
});
function isContains(str, substr) {
return new RegExp(substr).test(str);
}
arr = function (json) {
var str = decodeURI($.param(json));
var result = [];
var new_arr = str.split('&');
for (var i = 0; i < new_arr.length; i++) {
var sut = new_arr[i].split('=');
var arr = {};
arr.name = sut[0];
arr.value = sut[1];
result.push(arr);
}
return result;
}
function createDiv(json) {
var oDiv = document.createElement('div');
oDiv.innerHTML = json[0].value;
AppOrInsertChild(aLi[0], oDiv);
}
function AppOrInsertChild(node, aporinnode) {
if (node.childNodes.length > 0) {
node.insertBefore(aporinnode, node.childNodes[0]);
} else {
node.appendChild(aporinnode);
}
aporinnode.index = parseInt(window.localStorage.getItem('num'));
var h = aporinnode.offsetHeight;
aporinnode.style.height = 0;
h.innerHTML = '';
StartMove(aporinnode, { height: h, opacity: 1 });
}
</script>
所用move.js
1 // JavaScript Document 2 //缓冲运动 3 4 5 //缓冲运动 6 function StartMove(obj,json,fn){ 7 8 clearInterval(obj.timer); 9 obj.timer=setInterval(function(){ 10 var bStop=true; 11 12 for(var attr in json) 13 { 14 var iCu=0; 15 if(attr=='opacity') 16 {iCu= parseInt(parseFloat(GetStyle(obj,attr))*100);}//处理小数问题，扩大倍数 17 else 18 {iCu=parseInt(GetStyle(obj,attr));} 19 20 21 var iSpeed=(json[attr]-(iCu))/8; 22 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 23 if(iCu!=json[attr]) 24 { bStop=false;} 25 if(attr=='opacity') 26 { 27 obj.style.filter='alpha(opacity:'+(iCu+iSpeed)+')'; 28 obj.style.opacity=(iCu+iSpeed)*100; 29 } 30 else 31 { 32 obj.style[attr]=iCu+iSpeed+'px'; 33 } 34 } 35 36 if(bStop) 37 { 38 clearInterval(obj.timer); 39 if(fn) 40 { 41 fn(); 42 } 43 } 44 },30); 45 46 } 47 48 //弹性运动 49 var iSpeed_Tanxing=0; 50 var left_Tanxing=0;//将 小数存放在变量中 解决小数显示问题 51 function move_Tan(obj,iTaget){ 52 53 clearInterval(obj.timer); 54 obj.timer=setInterval(function(){ 55 /* 56 弹性运动公式 57 */ 58 iSpeed_Tanxing+=(iTaget-obj.offsetLeft)/5; 59 iSpeed_Tanxing*=0.7 60 left_Tanxing+=iSpeed_Tanxing; 61 62 if(Math.abs(iSpeed_Tanxing)<0.1&&Math.abs(left_Tanxing-iTaget)<0.1)//在一定范围内就停止定时器，解决目标点问题 63 {clearInterval(obj.timer);obj.style.left=iTaget+'px';} 64 else 65 obj.style.left=left_Tanxing+'px'; 66 67 },30); 68 } 69 70 //碰撞运动 71 var iSpeedX_Pengzhuang=0; 72 var iSpeedY_Pengzhuang=0; 73 function move_Peng(obj){ 74 clearInterval(obj.timer); 75 obj.timer=setInterval(function(){ 76 iSpeedY_Pengzhuang+=3; 77 L=obj.offsetLeft+iSpeedX_Pengzhuang; 78 T=obj.offsetTop+iSpeedY_Pengzhuang; 79 if(T>=document.documentElement.clientHeight-obj.offsetHeight) 80 { 81 iSpeedY_Pengzhuang*=-0.8; 82 iSpeedX_Pengzhuang*=0.8; 83 T=document.documentElement.clientHeight-obj.offsetHeight; 84 } 85 else if(T<=0) 86 { 87 iSpeedY_Pengzhuang*=-0.8; 88 iSpeedX_Pengzhuang*=0.8; 89 T=0; 90 } 91 if(L>=document.documentElement.clientWidth-obj.offsetWidth) 92 { 93 iSpeedY_Pengzhuang*=0.8; 94 iSpeedX_Pengzhuang*=-0.8; 95 L=document.documentElement.clientWidth-obj.offsetWidth; 96 } 97 else if(L<=0) 98 { 99 iSpeedY_Pengzhuang*=0.8; 100 iSpeedX_Pengzhuang*=-0.8; 101 L=0; 102 } 103 if(Math.abs(iSpeedX_Pengzhuang)<0.5) 104 { 105 iSpeedX_Pengzhuang=0; 106 } 107 if(Math.abs(iSpeedY_Pengzhuang)<0.5) 108 { 109 iSpeedY_Pengzhuang=0; 110 } 111 obj.style.left=L+'px'; 112 obj.style.top=T+'px'; 113 },30); 114 } 115 116 117 function GetStyle(obj,attr){ 118 119 if(obj.currentStyle) 120 { 121 return obj.currentStyle[attr]; 122 } 123 else 124 { 125 return getComputedStyle(obj,false)[attr]; 126 } 127 }; 128 129 function getClassNames(oParent,className){ 130 var obj=oParent.getElementsByTagName('*'); 131 var attr=[]; 132 var re=new RegExp('\b'+className+'\b'); 133 for(var i=0; i<obj.length;i++) 134 { 135 if(re.test(obj[i].className)) 136 {attr.push(obj[i]);} 137 } 138 return attr; 139 }