原生js封裝的運動框架,move-2.0.js

function getStyle(obj,name){      //獲取樣式函數
  return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
}


//運動函數,json參數裏設置樣式,options參數設置效果選項
function startMove(obj,json,options){       

  var start={};   //定義空對象
  var dis={};

  options=options || {};          //option參數可不寫
  options.time=options.time || 700;
  options.type=options.type || 'ease-out';

  for(var name in json){
    if(name=='opacity'){        //獲取不透明度樣式
      start[name]=Math.round(parseFloat(getStyle(obj,name)))*100;
    }else{
      
      switch(name){       //若用戶未填寫初始left及top值,自動計算元素left及top值
        case 'left':
        start[name]=obj.offsetLeft;
        break;
        case 'top':
        start[name]=obj.offsetTop;
        break;
        default:
        start[name]=parseInt(getStyle(obj,name));
      }
    }
    
    dis[name]=json[name]-start[name];
  }

  var count=parseInt(options.time/30);    //走了多少次
  var n=0;    //用來計數,當前走到第n次

  clearInterval(obj.timer);       //將timer加到obj上,以便多個元素能夠同時使用計時器

    obj.timer=setInterval(function(){

    obj.style.margin=0;       //清除margin帶來的影響

    n++;

    for(var name in json){

      switch(options.type){
        case 'linear':      //勻速
        var cur=start[name]+dis[name]*n/count;
        break;
        case 'ease-in':     //加速
        var a=n/count;
        var cur=start[name]+dis[name]*(a*a*a);
        break;
        case 'ease-out':    //減速
        var a=1-n/count;
        var cur=start[name]+dis[name]*(1-a*a*a);
        break;
      }


      if(name=='opacity'){
        obj.style.opacity=cur/100;
        obj.style.filter='alpha(opacity='+cur+')';
      }else{
        obj.style[name]=cur+'px';
      }
      
    }
    if(n==count){               //運動到指定位置時中止計時器
      clearInterval(obj.timer);
      options.end && options.end();
    }

    },30);
}
相關文章
相關標籤/搜索