JavaScript運動減速效果實例分析
更新時間：2015年08月04日 13:41:02 作者：皮蛋
這篇文章主要介紹了JavaScript運動減速效果,模擬了物體做減速運動的效果,以兩個實例形式分析了javascript實現(xiàn)物體做減速運動的實現(xiàn)技巧,涉及javascript動態(tài)操作頁面元素樣式及數(shù)學運算的方法,非常簡潔實用,需要的朋友可以參考下
本文實例講述了JavaScript運動減速效果。分享給大家供大家參考。具體如下：
這段代碼可幫助利用JS從事游戲編程的朋友，它主要實現(xià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運動減速效果</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程序設計有所幫助。
您可能感興趣的文章:
- javascript 實現(xiàn)自由落體的方塊效果
- javascript彈性運動效果簡單實現(xiàn)方法
- javascript多物體運動實現(xiàn)方法分析
- javascript勻速運動實現(xiàn)方法分析
- JavaScript緩沖運動實現(xiàn)方法(2則示例)
- JS運動相關知識點小結(jié)(附彈性運動示例)
- JavaScript拖拽、碰撞、重力及彈性運動實例分析
- javascript實現(xiàn)10個球隨機運動、碰撞實例詳解
- jQuery+canvas實現(xiàn)的球體平拋及顏色動態(tài)變換效果
- jQuery+canvas實現(xiàn)簡單的球體斜拋及顏色動態(tài)變換效果
- js+html5實現(xiàn)的自由落體運動效果代碼
相關文章
JavaScript實現(xiàn)自己的DOM選擇器原理及代碼
實現(xiàn)自己的DOM選擇器時匹配行為也應該和瀏覽原生匹配行為一致,接下來本文將詳細介紹下實現(xiàn)思路及方法，感興趣的你可以參考下或許對你鞏固知識有所幫助2013-03-03
TypeScript在Vuex4中使用TS實戰(zhàn)分享
這篇文章主要介紹了TypeScript在Vuex4中使用TS實戰(zhàn)分享，vuex4類型?Api分析和vuex4實戰(zhàn)兩部分講述，需要的小伙伴可以參考一下2022-06-06
下面小編就為大家?guī)硪黄远x事件解決重復請求BUG的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
隔行換色非表格版不過原理可以參考下面的代碼，寫的很不錯2008-05-05
這篇文章主要介紹了JS對圖片進行黑白化的實現(xiàn)代碼,需要的朋友可以參考下2018-04-04
JavaScript數(shù)據(jù)分析之交集,并集,對稱差集
這篇文章主要介紹了JavaScript數(shù)據(jù)分析之交集,并集,對稱差集，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了JS實現(xiàn)的手機端精簡幻燈片效果,涉及javascript結(jié)合時間函數(shù)動態(tài)修改頁面元素的相關技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了img的href和src取變量及賦值的方法,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了MUI Scroll插件的使用詳解,需要的朋友可以參考下2017-04-04
本篇文章給大家分享一段實例代碼，主要介紹js查看一個函數(shù)的執(zhí)行時間，代碼簡單易懂，感興趣的朋友一起跟著小編來學習學習吧2015-09-09