<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: blue;
position: absolute;left: 0px; top: 0px;
}
*{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="div1"></div>
<input type="button" id="btn" name="" value="回放">
<script type="text/javascript">
var arrX=[],arrY=[];
div1.onmousedown=function(e){
var ev=e||event;
var l=ev.clientX-this.offsetLeft;
var t=ev.clientY-this.offsetTop;
arrX.push(0);
arrY.push(0);
document.onmousemove=function(e){
var ev=e||event;
var needLeft=ev.clientX-l;
var needTop=ev.clientY-t;
arrX.push(needLeft);
arrY.push(needTop);
div1.style.left = needLeft + 'px';
div1.style.top =needTop+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmousedowm=null;
}
var t=null;
btn.onclick=function(){
clearInterval(t) ;
t=setInterval(function(){
if(arrY.length==0){
clearInterval(t);
}
div1.style.left= arrX.pop()+'px';
div1.style.top= arrY.pop() +'px';
},30)
}
return false;
}
</script>
</body>
</html>
