JavaScript拖拽、碰撞、重力及彈性運(yùn)動實例分析
本文實例講述了JavaScript拖拽、碰撞、重力及彈性運(yùn)動實現(xiàn)方法。分享給大家供大家參考,具體如下:
js拖拽、碰撞與重力實現(xiàn)代碼:
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彈性運(yùn)動實現(xiàn)代碼:
var left=0; //用left變量存儲賦給obj.style.left的值,以防每次系統(tǒng)都省略小數(shù),所導(dǎo)致最后結(jié)果的細(xì)微差異 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"; //清楚后,順便把目標(biāo)值賦給obj.style.left } else { obj.style.left=left+"px"; } },30); }
更多關(guān)于JavaScript運(yùn)動效果相關(guān)內(nèi)容可查看本站專題:《JavaScript運(yùn)動效果與技巧匯總》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript中sharedWorker 實現(xiàn)多頁面通信的實例詳解
這篇文章主要介紹了JavaScript中sharedWorker 實現(xiàn)多頁面通信,通過給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-04-04由淺入深講解Javascript繼承機(jī)制與simple-inheritance源碼分析
Javascript語言對繼承實現(xiàn)的并不好,需要工程師自己去實現(xiàn)一套完整的繼承機(jī)制。下面我們由淺入深的系統(tǒng)掌握使用javascript繼承的技巧,對javascript繼承相關(guān)知識感興趣的朋友一起看看吧2015-12-12推薦幾個不錯的console調(diào)試技巧實現(xiàn)
這篇文章主要介紹了推薦幾個不錯的console調(diào)試技巧實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹添加/刪除節(jié)點操作示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹添加/刪除節(jié)點操作,涉及javascript二叉樹的定義、節(jié)點添加、刪除、遍歷等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03JavaScript設(shè)計模式之構(gòu)造函數(shù)模式實例教程
這篇文章主要介紹了JavaScript設(shè)計模式之構(gòu)造函數(shù)模式,結(jié)合實例形式分析了構(gòu)造函數(shù)模式的概念、功能、定義及使用方法,需要的朋友可以參考下2018-07-07JavaScript forEach中return失效問題解決方案
這篇文章主要介紹了JavaScript forEach中return失效問題解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06