javascript动画效果之任意效果任意值

通过学习，我发现当同一个ul下的li标签如果想要不同的效果，那怎么办？

比如第一个li是width变化，第二个li为透明度(opacity)变化，而opacity的值和width的值类型不同，不能通用那怎么办？

而设置两个函数，只为了，两个值变化就显得太过麻烦，通过学习，我发现可以通过一些方法来实现

代码如下

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7     <style type="text/css">
 8         * {
 9             margin: 0;
10             padding: 0;
11             font-size: 12px;
12         }
13         
14         li {
15             list-style: none;
16             width: 200px;
17             height: 100px;
18             margin: 10px;
19             background: pink;
20             border: 1px solid blue;
21             filter: alpha(opacity: 30);
22             opacity: 0.3;
23         }
24     </style>
25 </head>
26 
27 <body>
28 
29     <ul id="show">
30         <li id="btn1"></li>
31         <li id="btn2"></li>
32     </ul>
33 
34 
35     
36 </body>
37 
38 </html>

js部分用了一些新的方法，可以看注释，还不清楚可以自行百度

 1 <script type="text/javascript">
 2         function $(id) {
 3             return typeof id === "string" ? document.getElementById(id) : id;
 4         }
 5         window.onload = function() {
 6 
 7             var btn1 = $("btn1");
 8             var btn2 = $("btn2");
 9             var speed = 0;
10 
11             btn1.onmouseenter = function() {
12                 changeBtn(this, 'width', 400);
13             }
14 
15             btn1.onmouseleave = function() {
16                 changeBtn(this, 'width', 200);
17             }
18 
19             btn2.onmouseenter = function() {
20                 changeBtn(this, 'opacity', 100);
21             }
22 
23             btn2.onmouseleave = function() {
24                 changeBtn(this, 'opacity', 30);
25             }
26 
27             //obj为当前的鼠标所指向的标签
28             //stChg为对应的变量样式
29             //chgWid为需要改变的值
30             function changeBtn(obj, stChg, chgWid) {
31                 clearInterval(obj.timer);
32 
33                 obj.timer = setInterval(function() {
34                     //chg这个变量本来为长度，宽度，或者透明度什么的
35                     //但是现在通过一个getStyle()函数来获取
36                     var chg = 0;
37                     //进入函数，需要先判定是否透明度样式
38                     if (stChg == 'opacity') {
39                         //为真，则执行parseFloat()此方法返回的是浮点数
40                         chg = Math.round(parseFloat(getStyle(obj, stChg)) * 100);
41                     } else {
42                         //为假，则执行parseInt()此方法返回的是整数
43                         chg = parseInt(getStyle(obj, stChg));
44                     }
45                     //判定初始值(chg)是否小于输入值(chgWid)
46                     if (chg < chgWid) {
47                         speed = 10;
48                     } else {
49                         speed = -10;
50                     }
51                     //console.log(speed);
52                     if (chg == chgWid) {
53                         //相等时候，则清楚定时器
54                         clearInterval(obj.timer);
55                     } else {
56                         //不相等时，则先进性判定样式是否为特殊样式opacity
57                         if (stChg == 'opacity') {
58                             //为真，对应其他浏览器，则执行(chg+speed)=当前样式的值+speed
59                             //比如开始是(30+10),那么下一次就为(40+10)
60                             obj.style.opacity = (chg + speed) / 100;
61                             //为真，对应的ie浏览器，方法同上
62                             obj.style.filter = 'alpha(opacity: ' + (chg + speed) + ')';
63                         } else {
64                             //为假则为普通样式取值，stChg为width时style[width]=style.width
65                             obj.style[stChg] = chg + speed + 'px';
66                         }
67                     }
68                 }, 30);
69             }
70 
71 
72             //这个函数返回的是一个值，例如attr传参为width
73             //为真时obj.currentStyle[attr]=200
74             function getStyle(obj, attr) {
75                 if (obj.currentStyle) {
76                     //currentStyle获取样式的值，对应的是ie浏览器
77                     return obj.currentStyle[attr];
78                 } else {
79                     //同理，对应的是其他浏览器
80                     return getComputedStyle(obj, false)[attr];
81                 }
82             }
83 
84         }
85     </script>