<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{
height:100px;
width:100px;
background:pink;
position:absolute;
}
</style>
<script>
window.onload = function ()
{
var obtn = document.getElementById('btn');
var odiv = document.getElementById('div1');
var arrL = [];
var arrT = [];
odiv.onmousedown = function (ev)
{
var ev = ev || event;
var dix = ev.clientX - this.offsetLeft;
var diy = ev.clientY - this.offsetTop;
if(odiv.setCaputre)
{
odiv.setCapture();
}
document.onmousemove = function (ev)
{
var ev = ev || event;
var L = ev.clientX - dix;
var T = ev.clientY - diy;
if(T < 0)
{
T = 0;
}else if( T > document.documentElement.clientHeight - odiv.offsetHeight)
{
T = document.documentElement.clientHeight - odiv.offsetHeight;
}
if( L < 0)
{
L = 0;
}
else if(L > document.documentElement.clientWidth - odiv.offsetWidth)
{
L = document.documentElement.clientWidth - odiv.offsetWidth;
}
arrT.push(T);
arrL.push(L);
odiv.style.left = L + 'px';
odiv.style.top = T + 'px';
};
document.onmouseup = function ()
{
document.onmousemove = document.onmousedown = null;
if( odiv.releaseCapture)
{
odiv.releaseCapture();
}
};
return false;
};
obtn.onclick = function ()
{
var i = 0;
arrT.reverse();
arrL.reverse();
obtn.timer = setInterval( function ()
{
odiv.style.top = arrT[i]+ 'px';
odiv.style.left = arrL[i] + 'px';
i++;
if(i == arrL.length)
{
clearInterval(obtn.timer);
arrT = [];
arrL = [];
}
},20);
};
};
</script>
</head>
<body>
<input type="button" id="btn" value="回放">
<div id="div1"></div>
</body>
</html>