本文實例講述了JavaScript拖拽、碰撞、重力及彈性運動實現方法。分享給大家供大家參考,具體如下:
js拖拽、碰撞與重力實現代碼:
window.onload=function (){ var oDiv=document.getElementById('div1'); var lastX=0; var lastY=0; oDiv.onmousedown=function (ev) { var oEvent=ev||event; var disX=oEvent.clientX-oDiv.offsetLeft; var disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function (ev) { var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; iSpeedX=l-lastX; iSpeedY=t-lastY; lastX=l; lastY=t; document.title='x:'+iSpeedX+', y:'+iSpeedY; }; document.onmouseup=function () { document.onmousemove=null; document.onmouseup=null; startMove(); }; clearInterval(timer); };};var timer=null;var iSpeedX=0;var iSpeedY=0;function startMove(){ clearInterval(timer); timer=setInterval(function (){ var oDiv=document.getElementById('div1'); iSpeedY+=3; var l=oDiv.offsetLeft+iSpeedX; var t=oDiv.offsetTop+iSpeedY; if(t>=document.documentElement.clientHeight-oDiv.offsetHeight) { iSpeedY*=-0.8; iSpeedX*=0.8; t=document.documentElement.clientHeight-oDiv.offsetHeight; } else if(t<=0) { iSpeedY*=-1; iSpeedX*=0.8; t=0; } if(l>=document.documentElement.clientWidth-oDiv.offsetWidth) { iSpeedX*=-0.8; l=document.documentElement.clientWidth-oDiv.offsetWidth; } else if(l<=0) { iSpeedX*=-0.8; l=0; } if(Math.abs(iSpeedX)<1) { iSpeedX=0; } if(Math.abs(iSpeedY)<1) { iSpeedY=0; } if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight) { clearInterval(timer); alert('停止'); } else { oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; } document.title=iSpeedX; }, 30);}
js彈性運動實現代碼:
var left=0; //用left變量存儲賦給obj.style.left的值,以防每次系統都省略小數,所導致最后結果的細微差異var iSpeed=0;function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ iSpeed+=(iTarget-obj.offsetLeft)/5; //速度 iSpeed*=0.7; //考慮阻力 left+=iSpeed; if(Math.abs(iSpeed)<1&&Math.abs(iTarget-obj.offsetLeft)<1) //停止條件 速度和距離絕對值小于1 { clearInterval(obj.timer); obj.style.left=iTarget+"px"; //清楚后,順便把目標值賦給obj.style.left } else { obj.style.left=left+"px"; } },30);}
更多關于JavaScript運動效果相關內容可查看本站專題:《JavaScript運動效果與技巧匯總》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答