<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{margin: 0 ; padding: 0;}
#div1{
height: 50px;
width: 50px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="div1"> </div>
<script>
div1.addEventListener("mousedown",fn,false);
function fn(e){
var arr = new Array() ;// 记录轨迹 arrL,arrT
var left = e.clientX - div1.offsetLeft;
var top = e.clientY - div1.offsetTop;
arr.unshift([div1.offsetTop,div1.offsetLeft]);//存储最开始的位置，不然每次都会有一定的误差
document.addEventListener("mousemove",move,false);
document.addEventListener("mouseup",up,false);
function move(e){
var l = e.clientX - left;
var t = e.clientY - top;
arr.unshift([t,l]);
div1.style.left = l + "px";
div1.style.top = t + "px";
}
function up(){
var len = arr.length-1,i=0;
var time = setInterval(function(){
div1.style.left = arr[i][1] + "px";
div1.style.top = arr[i][0] + "px";
i++;
if(i>len){
clearInterval(time);
}
},10);
document.removeEventListener("mousemove",move,false);
document.removeEventListener("mouseup",up,false);
}
}
</script>
</body>
</html>
08-22
251
251
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
