View Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML XMLNS:ELEMENT> <html> <head> <title>::drag::</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style> body{ margin:0px; background-color:#5f9fff; overflow:hidden; } #center{ background-color:#efefef; } #ct_frame{ position:absolute; top:0px; left:0px; } </style> </head> <body> <div id="center"></div> </body> </html> <script type="text/javascript"> var ct = document.getElementById("center"); var oX = 0; var oY = 0; var dX = 0; var dY = 0; var eBut = -1; var delay = 1; (function(){ var x = document.body.clientWidth; var y = document.body.clientHeight; ct.style.position = "absolute"; ct.style.top = "0px"; ct.style.left = "0px"; ct.style.width = x + "px"; ct.style.height = y + "px";; })(); window.onmousedown = function(event){ eBut = event.button; if(eBut == 2){ oX = event.clientX; oY = event.clientY; } else { return 0; } eButDown = true; }; window.onmouseup = function() { eBut = -1; delay = 1; //ct.style.top = "500px"; //ct.style.left = "500px"; var fx = ct.offsetLeft; var fy = ct.offsetTop; goBack(fx,fy); }; window.onmousemove = function(event) { if(eBut == 2){ dx = event.clientX - oX; dy = event.clientY - oY; ct.style.left = (0 + dx / delay) + "px"; ct.style.top = (0 + dy / delay) + "px"; delay += 0.2; } }; document.oncontextmenu = function(){ return false; }; function goBack(x,y) { var stepX = (0 - x) / 5; var stepY = (0 - y) / 5; var sx = new Array(); var sy = new Array(); var index = 0; for(var i = 2;i >= -2;i--) { sx[index] = stepX + (i * (stepX / 5)); sy[index] = stepY + (i * (stepX / 5)); index++; } var count = 0; var timer = window.setInterval(function(){ ct.style.left = (ct.offsetLeft + sx[count]) + "px"; ct.style.top = (ct.offsetTop + sy[count]) + "px"; count++; if(count >= 5){ ct.style.left = "0px"; ct.style.top = "0px"; window.clearInterval(timer); } },10); } </script>