快捷導(dǎo)航

JavaScript運(yùn)動(dòng)減速效果實(shí)例分析

更新時(shí)間：2015年08月04日 13:41:02 作者：皮蛋

這篇文章主要介紹了JavaScript運(yùn)動(dòng)減速效果,模擬了物體做減速運(yùn)動(dòng)的效果,以兩個(gè)實(shí)例形式分析了javascript實(shí)現(xiàn)物體做減速運(yùn)動(dòng)的實(shí)現(xiàn)技巧,涉及javascript動(dòng)態(tài)操作頁(yè)面元素樣式及數(shù)學(xué)運(yùn)算的方法,非常簡(jiǎn)潔實(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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)自己的DOM選擇器原理及代碼
實(shí)現(xiàn)自己的DOM選擇器時(shí)匹配行為也應(yīng)該和瀏覽原生匹配行為一致,接下來(lái)本文將詳細(xì)介紹下實(shí)現(xiàn)思路及方法，感興趣的你可以參考下或許對(duì)你鞏固知識(shí)有所幫助
2013-03-03
TypeScript在Vuex4中使用TS實(shí)戰(zhàn)分享
這篇文章主要介紹了TypeScript在Vuex4中使用TS實(shí)戰(zhàn)分享，vuex4類型?Api分析和vuex4實(shí)戰(zhàn)兩部分講述，需要的小伙伴可以參考一下
2022-06-06
自定義事件解決重復(fù)請(qǐng)求BUG的問(wèn)題
下面小編就為大家?guī)?lái)一篇自定義事件解決重復(fù)請(qǐng)求BUG的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
li隔行換色改進(jìn)版
隔行換色非表格版不過(guò)原理可以參考下面的代碼，寫(xiě)的很不錯(cuò)
2008-05-05
JavaScript如何對(duì)圖片進(jìn)行黑白化
這篇文章主要介紹了JS對(duì)圖片進(jìn)行黑白化的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2018-04-04
JavaScript數(shù)據(jù)分析之交集,并集,對(duì)稱差集
這篇文章主要介紹了JavaScript數(shù)據(jù)分析之交集,并集,對(duì)稱差集，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-07-07
JS實(shí)現(xiàn)的手機(jī)端精簡(jiǎn)幻燈片效果
這篇文章主要介紹了JS實(shí)現(xiàn)的手機(jī)端精簡(jiǎn)幻燈片效果,涉及javascript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)修改頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下
2016-09-09
關(guān)于img的href和src取變量及賦值的方法
這篇文章主要介紹了img的href和src取變量及賦值的方法,需要的朋友可以參考下
2014-04-04
MUI Scroll插件的使用詳解
這篇文章主要介紹了MUI Scroll插件的使用詳解,需要的朋友可以參考下
2017-04-04
js查看一個(gè)函數(shù)的執(zhí)行時(shí)間實(shí)例代碼
本篇文章給大家分享一段實(shí)例代碼，主要介紹js查看一個(gè)函數(shù)的執(zhí)行時(shí)間，代碼簡(jiǎn)單易懂，感興趣的朋友一起跟著小編來(lái)學(xué)習(xí)學(xué)習(xí)吧
2015-09-09