JS运动特效之完美运动框架实例分析

oDiv.onmouseover = function () {
   //startMove(oDiv,{width:300,height:300,opacity:30});
   startMove(oDiv,{width:204,height:300,opacity:30});
}

if(objAttr == json[attr]){
    clearInterval(obj.timer);
    if(fn){
      fn();
    }
}

function startMove(obj,json,fn) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
       var flag = true;// 一进入定时器设置标志位
      },30);
}
var flag = true；// 表示所有的运动都到达目标值
var flag = false；// 表示有的运动没有到达目标值

if(objAttr != json[attr]){// 判断是否所有的运动都达到目标值
     // 进入if语句，说明至少有一个 运动未到达目标值
     flag = false;
}

for(attr in json){
}
if(flag){// 再次判断flag的值
  clearInterval(obj.timer);
  if(fn){
    fn();
  }
}

<script>
    window.onload = function(){
      var oDiv = document.getElementById('div1');
      oDiv.onmouseover = function () {
        //startMove(oDiv,{width:300,height:300,opacity:30});
        startMove(oDiv,{width:204,height:300,opacity:30});
      }
      oDiv.onmouseout = function () {
        startMove(oDiv,{width:200,height:200,opacity:100});
      }
    }
    function getStyle(obj,attr){
      return getComputedStyle "opacity"){
            objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
          }else{
            objAttr = parseInt(getStyle(obj,attr));
          }
          // 2.计算运动速度
          var iSpeed = (json[attr] -objAttr)/10;
            iSpeed = iSpeed>0 "opacity"){
            obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
            obj.style.opacity = (objAttr+iSpeed)/100;
          }else{
            obj.style[attr] = objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]
          }
        }
        if(bStop){ // 表示所有运动都到达目标值
          clearInterval(obj.timer);
          if(fn){
            fn();
          }
        }
      },30);
    }
</script>