<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ height:100px; 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>