刚学的运动框架

 <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;
} 
 

<script>

   window.onload = function(){

      var aLi = document.getElentById('li');
      aLi.onmouseover = function(){
          startMove(Li,{width:400,height:400,opacity:0.5});
  }
};
function startMove(obj,json,func){
  clearInterval(obj.timer);            //避免对象争时，先清除每个对象可能存在的setInterval
  obj.timer = setInterval(function(){
      for(var attr in json){
       var flag = true;  //定义一个标杆
       var icur = 0;
        if(attr == 'opacity'){
           icur = Math.round(parseFloat(getStyle(obj,opacity))*100);
        }else{
           icur = parseInt(getStyle(obj.attr));
          }
       }
        var speed = (json[attr]-icur)/8;     //定义一个速度
        speed = speed>0?Math.ceil(speed):Math.floor(speed);
        if(icur != json[attr]){    //判断元素属性是否完全等于目标值
            flag = flase;          //如果flag为假则按要求改变
         }
           if(attr == 'opacity'){
          obj.style.opaciyt = (icur + speed)*100;
          obj.style.filter = 'alpah(opacity:'+(icur + speed)+')'
         }else{
             obj.style[attr] = icur + speed +'px';
          }
          if(flag){
            clearInterval(obj.timer);
            if(func){
               func(); 
              }
          }
  },30)
} 
    //获取元素自身属性
function getStyle(obj,attr){
   if(obj.currentStyle){
      return obj.currentStyle[attr];
    }else{
      return getComputerStyle(obj,false)[attr];
       }
  }
</script>