JavaScript运动减速效果，模拟了物体做减速运动的效果,以两个实例形式分析了javascript实现物体做减速运动的实现技巧,涉及javascript动态操作页面元素样式及数学运算的方法,非常简洁实用。
运行效果如下图所示：
具体代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!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> |