刚学的运动框架

 <ul><li id="li"></li></ul>


li{
    list-style: none;
    width: 200px;
    height: 100px;
    border: 2px solid #000;
    background: yellow;
    filter: alpha(opacity:30);
    opacity: .3;
} 
 

1 <script>

2   window.onload = function(){

 3       var aLi = document.getElentById(‘li‘);
 4       aLi.onmouseover = function(){
 5           startMove(Li,{width:400,height:400,opacity:0.5});
 6   }
 7 };
 8 function startMove(obj,json,func){
 9   clearInterval(obj.timer);            //避免对象争时，先清除每个对象可能存在的setInterval
10   obj.timer = setInterval(function(){
11       for(var attr in json){
12        var flag = true;  //定义一个标杆
13        var icur = 0;
14         if(attr == ‘opacity‘){
15            icur = Math.round(parseFloat(getStyle(obj,opacity))*100);
16         }else{
17            icur = parseInt(getStyle(obj.attr));
18           }
19        }
20         var speed = (json[attr]-icur)/8;     //定义一个速度
21         speed = speed>0?Math.ceil(speed):Math.floor(speed);
22         if(icur != json[attr]){    //判断元素属性是否完全等于目标值
23             flag = flase;          //如果flag为假则按要求改变
24          }
25            if(attr == ‘opacity‘){
26           obj.style.opaciyt = (icur + speed)*100;
27           obj.style.filter = ‘alpah(opacity:‘+(icur + speed)+‘)‘
28          }else{
29              obj.style[attr] = icur + speed +‘px‘;
30           }
31           if(flag){
32             clearInterval(obj.timer);
33             if(func){
34                func(); 
35               }
36           }
37   },30)
38 } 
    //获取元素自身属性
39 function getStyle(obj,attr){
40    if(obj.currentStyle){
41       return obj.currentStyle[attr];
42     }else{
43       return getComputerStyle(obj,false)[attr];
44        }
45   }
46 </script>