关于减速运动效果

稿源：互联网 2022-06-11 10:04:24 点击： 725 撤稿纠错

通过js实现减速效果。可自定义

以下讨论的是和减速效果相关的关于减速运动效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br><title>无标题文档</title><br></head><br><body><br><div style=" position:relative; border:1px solid #000000; width:550px; height:50px;"><br><div id="aa" style="width:50px; height:50px; background:#930; position:absolute;"></div><br></div><br><div id="x"></div><br><div style=" position:relative; border:1px solid #000000; width:550px; height:50px;"><br><div id="bb" style="width:50px; height:50px; background:#0000FF; position:absolute;"></div><br></div><br><div id="y"></div><br><script><br>var $ = function (id) {<br> return "string" == typeof id ? document.getElementById(id) : id;<br>};<br>var ss = 0;<br>var s = 500;<br>var tt = 300;<br>var a = 2*s/(tt*tt);<br>var o = $("aa");<br>var i = 0;<br>var t = 0;<br>function run(){<br> t++;<br> i = parseInt((a*tt)*t - .5 * a * (t*t));<br> if(i>=s){ o.style.left = ss + s + "px"; return; }<br> o.style.left = ss + i + "px";<br> $("x").innerHTML+=i+",";<br> setTimeout(run, 10);<br>}<br>run();<br>var s2 = 500;<br>var o2 = $("bb");<br>var i2 = 0;<br>function run2(){<br> var s = (s2-i2)/100;<br> if(s>0 && s < 1){ s=1; };<br> if(s==0 || i2 + s>=s2){ o2.style.left = ss + s2 + "px"; return; }<br> o2.style.left = ss + i2 + s + "px";<br> i2=i2 + s;<br> $("y").innerHTML+=parseInt(i2 + s)+",";<br> setTimeout(run2, 10);<br>}<br>run2();<br></script><br></body><br></html></font><br><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于关于减速运动效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200812013978.shtml方便下次再访问哦。

·上一篇： 做了个简单的五子棋，自娱自乐。
·下一篇： JS获取对象代码示例

关于减速运动效果

文章分类LIST >>返回首页

最新游戏

最新新闻