JavaScript运动减速效果实例分析

2015-08-04 17:35作者：yezheng

本文实例讲述了JavaScript运动减速效果。分享给大家供大家参考。具体如下：
这段代码可帮助利用JS从事游戏编程的朋友，它主要实现一种运行减速缓冲的效果，代码精简，很不错。
运行效果如下图所示：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JavaScript运动减速效果</title>

</head>

<body>

</div>

</div>

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程序设计有所帮助。