js实现一套代码来控制所有的运动，图片的淡入淡出，winth，height的变宽

介绍了那么多运动，這次一套代码实现所有运动

1.html代码和css代码，只是定义一个div

 1 <style>
 2     div{
 3         width:200px;
 4         height:200px;
 5         margin:20px;
 6         float:left;
 7         background:yellow;
 8         border:10px solid black;
 9         filter:alpha(opacity:30);
10         opacity:0.3;
11     }
12 </style>
13 <body>
14 <div id="div1">
15 
16 </div>
17     
18 </body>

2.js代码部分

 1 <script>
 2     window.onload=function()
 3     {
 4         var div=document.getElementById('div1');
 5         div.onmouseover=function()
 6         {
 7             startMove(this,'height',1000);
 8         }
 9         div.onmouseout=function()
10         {
11             startMove(this,'height',50);
12         }
13     };
14     function getStyle(obj,name)    //兼容性问题，修改非行间的css
15     {
16         if (obj.currentStyle)//chrome和firefox
17         {
18               return obj.currentStyle[name];
19         }
20         else//ie浏览器
21         {
22             return getComputedStyle(obj,false)[name];
23         }
24     }
25     function startMove(obj,attr,iTarget)
26     {
27         clearInterval(obj.timer);
28         obj.timer=setInterval(function()
29             {
30                 var cur=0;
31                 if (attr=="opacity")   //判断传入的参数是不是透明度
32                 {
33                     cur=parseFloat(getStyle(obj,attr))*100;  //强制转换为浮点数
34                 }
35                 else   //如果不是透明度，执行這句
36                 {
37                     cur=parseInt(getStyle(obj, attr));  //返回传入要修改的属性的值
38                 }
39                 var speed=(iTarget-cur)/100 ;  //设置速度
40                 speed=speed>0?Math.ceil(speed):Math.floor(speed);  //取上下限
41 
42                 if(cur==iTarget)  //当等于要实现的值时停止
43                 {
44                     clearInterval(obj.timer);
45                 }
46                 else
47                 {
48                     if (attr=='opacity')  //如果是透明度，兼容性。写两句
49                     {
50                         obj.style.filter='alpha(opcity:'+(cur+speed)+')';  //chrome和firefox
51                         obj.style.opacity=(cur+speed)+'px';  //ie
52                     }
53                     else   //要修改的是其他，直接修改他的值
54                     {
55                         obj.style[attr]=cur+speed+'px';
56                     }
57                 }
58             }, 
59             30)
60     }
61 </script>