js动画（三）
咳咳咳咳，感冒了感冒了，鼻塞，蓝瘦啊！嘴巴也开裂，哎，心疼自己。想到这是第三只唇膏了！只怪，放荡不倔爱自由，
行驶在冷风路上么，北风那个吹啊吹啊吹啊，好了，发神经发完了，接下来进入正题，严肃脸。（字数150应该凑够了。）
js链式运动
代码如下 ：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<style> #lia { width: 200px; height: 100px; background: red; opacity: 0.3; } </style> <script> window.onload = function() { var qwe = document.getElementById("lia"); qwe.timer = null; qwe.opacity=30;<br> /*以下，就是控制代码*/ qwe.onmouseover = function() { onStart(qwe,"width",400,10,function(){/*这里控制，宽，目标值，速度，以及下一个动画*/ onStart(qwe,"height",300,10,function(){/*这里控制，长，目标值，速度，以及下一个动画*/<br> onStart(qwe,"opacity",100,10);/*这里控制，透明度，目标值，速度，以及下一个动画，当然以上顺序可以换*/ |
|
1
|
}); <br> });<br> }<br><br> |
|
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
53
54
55
56
57
58
|
qwe.onmouseout = function() {/*这里不解释，跟上面一样*/ onStart(qwe,"opacity",30,-10,function(){ onStart(qwe,"height",100,-10,function(){ onStart(qwe,"width",200,-10); }); }); } }function getStyle(obj, attr) { /*obj对象，就是你要搞哪个元素，attr属性，你要搞哪个的属性*/ if(obj.currentStyle) { return obj.currentStyle[attr]; /*.currentStyle针对IE*/ } else { return getComputedStyle(obj,false)[attr]; /* getComputedStyle针对firebox浏览器*/ }} /*这个呢，是昨天的彩蛋，挺好用的，具体的功能就是，取对象的样式属性值，很好用*/function onStart(obj,attr, mu,speed,fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { if(parseInt(getStyle(obj,"width")) == mu) { if(fn){ fn() /*这里就是，关键，就是执行下一个，函数的功能，我在这里创建一个空函数， 具体函数内容交给主函数来写，所以这个函数，再多传一个参数，来判断， 是否需要执行下一个函数*/ } else{ clearInterval(obj.timer); } } else if(parseInt(getStyle(obj,"height")) == mu) { if(fn){ fn() } else{ clearInterval(obj.timer); } } else if(obj.opacity == mu){ clearInterval(obj.timer); if(fn){ fn(); } } else{ if(attr == "opacity"){ obj.opacity+=speed; obj.style.opacity = obj.opacity/100; } else if(attr == "width"){ obj.style.width = parseInt(getStyle(obj,"width"))+speed+"px"; } else if(attr == "height"){ obj.style.height = parseInt(getStyle(obj,"height"))+speed+"px"; } /*这里就是把三个功能给他合成在一个函数里，所以上述的fn(),执行的函数还是本身，只不过选择不同功能罢了 这里其实还可以优化，前面提到getStyle()，可以取到，对象的样式属性值，所以，可以把height和width整合起来。 */ } }, 30)} |
今天为什么把css的代码也放上来呢？
