JavaScript運(yùn)動(dòng)減速效果實(shí)例分析
本文實(shí)例講述了JavaScript運(yùn)動(dòng)減速效果。分享給大家供大家參考。具體如下:
這段代碼可幫助利用JS從事游戲編程的朋友,它主要實(shí)現(xiàn)一種運(yùn)行減速緩沖的效果,代碼精簡(jiǎn),很不錯(cuò)。
運(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)動(dòng)減速效果</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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- javascript 實(shí)現(xiàn)自由落體的方塊效果
- javascript彈性運(yùn)動(dòng)效果簡(jiǎn)單實(shí)現(xiàn)方法
- javascript多物體運(yùn)動(dòng)實(shí)現(xiàn)方法分析
- javascript勻速運(yùn)動(dòng)實(shí)現(xiàn)方法分析
- JavaScript緩沖運(yùn)動(dòng)實(shí)現(xiàn)方法(2則示例)
- JS運(yùn)動(dòng)相關(guān)知識(shí)點(diǎn)小結(jié)(附彈性運(yùn)動(dòng)示例)
- JavaScript拖拽、碰撞、重力及彈性運(yùn)動(dòng)實(shí)例分析
- javascript實(shí)現(xiàn)10個(gè)球隨機(jī)運(yùn)動(dòng)、碰撞實(shí)例詳解
- jQuery+canvas實(shí)現(xiàn)的球體平拋及顏色動(dòng)態(tài)變換效果
- jQuery+canvas實(shí)現(xiàn)簡(jiǎn)單的球體斜拋及顏色動(dòng)態(tài)變換效果
- js+html5實(shí)現(xiàn)的自由落體運(yùn)動(dòng)效果代碼
相關(guān)文章
JavaScript中scrollTo()無(wú)效問(wèn)題處理辦法
這篇文章主要給大家介紹了關(guān)于JavaScript中scrollTo()無(wú)效問(wèn)題處理辦法,scrollTo()方法將文檔滾動(dòng)到指定的坐標(biāo),如需使 scrollTo()方法起作用,文檔必須大于屏幕,并且滾動(dòng)條必須可見(jiàn),需要的朋友可以參考下2024-01-01JS實(shí)現(xiàn)的二叉樹(shù)算法完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的二叉樹(shù)算法,結(jié)合完整實(shí)例形式分析了基于JS定義、創(chuàng)建二叉樹(shù)及常用的各種遍歷、訪問(wèn)二叉樹(shù)操作技巧,需要的朋友可以參考下2017-04-04如何用JavaScript實(shí)現(xiàn)功能齊全的單鏈表詳解
這篇文章主要給大家介紹了關(guān)于如何用JavaScript實(shí)現(xiàn)功能齊全的單鏈表的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02JS+CSS實(shí)現(xiàn)彈出全屏灰黑色透明遮罩效果的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)彈出全屏灰黑色透明遮罩效果的方法,詳細(xì)分析了彈出遮罩層效果的實(shí)現(xiàn)方法以及完整的實(shí)例代碼,需要的朋友可以參考下2014-12-12一文讀懂JS中的var/let/const和暫時(shí)性死區(qū)
這篇文章主要為大家詳細(xì)介紹了JavaScript中的var、let、const和暫時(shí)性死區(qū)的異同,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-02-02