JavaScript運(yùn)動減速效果實例分析
更新時間:2015年08月04日 13:41:02 作者:皮蛋
這篇文章主要介紹了JavaScript運(yùn)動減速效果,模擬了物體做減速運(yùn)動的效果,以兩個實例形式分析了javascript實現(xiàn)物體做減速運(yùn)動的實現(xiàn)技巧,涉及javascript動態(tài)操作頁面元素樣式及數(shù)學(xué)運(yùn)算的方法,非常簡潔實用,需要的朋友可以參考下
本文實例講述了JavaScript運(yùn)動減速效果。分享給大家供大家參考。具體如下:
這段代碼可幫助利用JS從事游戲編程的朋友,它主要實現(xiàn)一種運(yùn)行減速緩沖的效果,代碼精簡,很不錯。
運(yùn)行效果如下圖所示:
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript運(yùn)動減速效果</title> </head> <body> <div style=" position:relative; border:1px solid #000000; width:550px; height:50px;"> <div id="aa" style="width:50px; height:50px; background:#930; position:absolute;"></div> </div> <div id="x"></div> <div style=" position:relative; border:1px solid #000000; width:550px; height:50px;"> <div id="bb" style="width:50px; height:50px; background:#0000FF; position:absolute;"></div> </div> <div id="y"></div> <script> var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var ss = 0; var s = 500; var tt = 300; var a = 2*s/(tt*tt); var o = $("aa"); var i = 0; var t = 0; function run(){ t++; i = parseInt((a*tt)*t - .5 * a * (t*t)); if(i>=s){ o.style.left = ss + s + "px"; return; } o.style.left = ss + i + "px"; $("x").innerHTML+=i+","; setTimeout(run, 10); } run(); var s2 = 500; var o2 = $("bb"); var i2 = 0; function run2(){ var s = (s2-i2)/100; if(s>0 && s < 1){ s=1; }; if(s==0 || i2 + s>=s2){ o2.style.left = ss + s2 + "px"; return; } o2.style.left = ss + i2 + s + "px"; i2=i2 + s; $("y").innerHTML+=parseInt(i2 + s)+","; setTimeout(run2, 10); } run2(); </script> </body> </html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- javascript 實現(xiàn)自由落體的方塊效果
- javascript彈性運(yùn)動效果簡單實現(xiàn)方法
- javascript多物體運(yùn)動實現(xiàn)方法分析
- javascript勻速運(yùn)動實現(xiàn)方法分析
- JavaScript緩沖運(yùn)動實現(xiàn)方法(2則示例)
- JS運(yùn)動相關(guān)知識點小結(jié)(附彈性運(yùn)動示例)
- JavaScript拖拽、碰撞、重力及彈性運(yùn)動實例分析
- javascript實現(xiàn)10個球隨機(jī)運(yùn)動、碰撞實例詳解
- jQuery+canvas實現(xiàn)的球體平拋及顏色動態(tài)變換效果
- jQuery+canvas實現(xiàn)簡單的球體斜拋及顏色動態(tài)變換效果
- js+html5實現(xiàn)的自由落體運(yùn)動效果代碼
相關(guān)文章
如何用JavaScript實現(xiàn)功能齊全的單鏈表詳解
這篇文章主要給大家介紹了關(guān)于如何用JavaScript實現(xiàn)功能齊全的單鏈表的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02JS+CSS實現(xiàn)彈出全屏灰黑色透明遮罩效果的方法
這篇文章主要介紹了JS+CSS實現(xiàn)彈出全屏灰黑色透明遮罩效果的方法,詳細(xì)分析了彈出遮罩層效果的實現(xiàn)方法以及完整的實例代碼,需要的朋友可以參考下2014-12-12一文讀懂JS中的var/let/const和暫時性死區(qū)
這篇文章主要為大家詳細(xì)介紹了JavaScript中的var、let、const和暫時性死區(qū)的異同,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-02-02