<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>记录照片位置</title>
<style type="text/css">
body{
background-color:rgb(177, 208,224); font: normal 12px Trebuchet MS; color:#000;
}
.photo{
position: absolute;
left: 10px; top:10px;
width: 100px; height:100px;
background:red;
}
</style>
</head>
<script type="text/javascript"></script>
<script>
window.onload = function(){
var pos = getCookie("pos");
function getCookie(key){
var str=document.cookie;
var list=str.split("; ");
for(var i=0;i<str.length;i++){
var keyval=list[i].split("=");
if(key===keyval[0]){
return keyval[1];
}
}
}
if(pos != null){
//eval 它可以将 严格符合json格式的字符串，转换成相应的对象
var arr = eval(pos);
for(var i=0; i<arr.length; i++){
var p = document.getElementById(arr[i].id);
p.style.left = arr[i].left;
p.style.top = arr[i].top;
}
}
var plist = document.getElementsByClassName("photo");
for(var i=0; i<plist.length; i++){
plist[i].onmousedown = function(event){
var $this = this;
var disx = event.offsetX, disy = event.offsetY;
document.onmousemove = function(e){
$this.style.left = e.clientX-disx+"px";
$this.style.top = e.clientY-disy+"px";
}
}
document.onmouseup = function(event){
//记录位置
//alert(event.target.id)
var div = event.target; // event.srcElement; IE
var left = getComputedStyle(div, null).left;
var top = getComputedStyle(div, null).top;
//cookie一次只能写一个键值对
//document.cookie = "left="+left;
//document.cookie = "top="+top;
var posArr = []
var plist = document.getElementsByClassName("photo");
for(var i=0; i<plist.length; i++){
var position = {
id : plist[i].id,
left : getComputedStyle(plist[i], null).left,
top : getComputedStyle(plist[i], null).top
}
posArr.push(position);
}
alert(posArr.toSource());
var d = new Date(2016,01,25);
document.cookie = "pos="+posArr.toSource()+";expires="+d;
document.onmousemove = null;
}
}
}
</script>
<body>
<div id="photo01" class="photo"></div>
<div id="photo02" class="photo"></div>
<div id="photo03" class="photo"></div>
</body>
</html>
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
