原生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);
}


你可能感兴趣的:(轮播图,运动,时间参数,原生js,匀速变速)