<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>前端ABC-qdabc.cn</title> <style> div{width:100px; height:100px; background:orangered; position:absolute;} </style> <script> function crashNdrag(id,l){ var oDiv =document.getElementById(id), ySpeed= 0, xSpeed= 0, lasty= 0, lastx= 0, left= 0, top= 0, position=[]; oDiv.onmousedown=function(ev){ clearInterval(oDiv.timer); var oEvent = ev||event; var disx=oEvent.clientX-oDiv.offsetLeft; var disy=oEvent.clientY-oDiv.offsetTop; oDiv.timer2=setInterval(function(){ ySpeed=lasty-position[0]; xSpeed=lastx-position[1]; position[0]=lasty; position[1]=lastx; },30); document.onmousemove=function(ev){ var oEvent = ev||event; console.log(oEvent); oDiv.style.left=oEvent.clientX-disx+'px'; oDiv.style.top=oEvent.clientY-disy+'px'; lasty=oEvent.clientY; lastx=oEvent.clientX; limit(oDiv,l) }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; clearInterval(oDiv.timer2); move(oDiv,l); oDiv.releaseCapture&&oDiv.releaseCapture(); }; oDiv.setCapture&&oDiv.setCapture(); return false; }; function limit(obj,limit){ limit=limit||[0,document.documentElement.clientHeight,0,document.documentElement.clientWidth]; if(obj.offsetTop<limit[0]){ obj.style.top=limit[0]+'px' } if(obj.offsetTop>limit[1]-obj.offsetHeight){ obj.style.top=limit[1]-obj.offsetHeight+'px' } if(obj.offsetLeft<limit[2]){ obj.style.left=limit[2]+'px' } if(obj.offsetLeft>limit[3]-obj.offsetWidth){ obj.style.left=limit[3]-obj.offsetWidth+'px' } } function move(obj,limit){ clearInterval(obj.timer); limit=limit||[0,document.documentElement.clientHeight,0,document.documentElement.clientWidth]; obj.timer=setInterval(function(){ ySpeed+=4; top=obj.offsetTop+ySpeed; left=obj.offsetLeft+xSpeed; if(top<limit[0]){ top=limit[0]; ySpeed*=-0.8; xSpeed*=0.8 } if(top>limit[1]-obj.offsetHeight){ top=limit[1]-obj.offsetHeight; ySpeed*=-0.8; xSpeed*=0.8 } if(left<limit[2]){ left=limit[2]; xSpeed*=-0.8; ySpeed*=0.8 } if(left>limit[3]-obj.offsetWidth){ left=limit[3]-obj.offsetWidth; xSpeed*=-0.8; ySpeed*=0.8 } if(Math.abs(xSpeed)<1)xSpeed=0; if(Math.abs(ySpeed)<1)ySpeed=0; obj.style.top=top+'px'; obj.style.left=left+'px'; if(Math.round(obj.offsetTop)==limit[1]-obj.offsetHeight&&xSpeed==0&&ySpeed==0){ clearInterval(obj.timer) } },30) } } window.onload=function(){ crashNdrag('div') } </script> </head> <body> <div id="div"></div> </body> </html>
欢迎分享本文,转载请保留出处:前端ABC » Javascript实现弹性抛物运动