JavaScript运动减速效果实例分析

2019-11-20 11:55:34

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JavaScript运动减速效果。分享给大家供大家参考。具体如下：

这段代码可帮助利用JS从事游戏编程的朋友，它主要实现一种运行减速缓冲的效果，代码精简，很不错。

运行效果如下图所示：

具体代码如下：

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

上一篇：js实现简易的单数字随机抽奖（0-9）

下一篇：JavaScript仿静态分页实现方法