无限循环轮播图之运动框架(原生JS实现)
封装运动框架
functiongetStyle(obj,name){
if(obj.currentStyle){
returnobj.currentStyle[name];
}else{
returngetComputedStyle(obj,false)[name];
}
}
functionmove(obj,json,options){
varoptions=options||{};
varduration=options.duration||800;
vareasing=options.easing||'linear';
varn=0;
varstart={};
vardis={};
varcount=Math.ceil(duration/30);
//{top:0,left:0}
for(nameinjson){
start[name]=parseFloat(getStyle(obj,name));
dis[name]=json[name]-start[name];
}
clearInterval(obj.timer);
obj.timer=setInterval(function(){
n++;
for(nameinjson){
switch(easing){
case'linear':
vara=n/count;
varcur=start[name]+dis[name]*a;
break;
case'ease-out':
vara=1-n/count;
varcur=start[name]+dis[name]*(1-a*a*a);
break;
case'ease-in':
vara=n/count;
varcur=start[name]+dis[name]*a*a*a;
break;
}
if(name=='opacity'){
obj.style[name]=cur;
}else{
obj.style[name]=cur+'px';
}
}
if(n==count){
clearInterval(obj.timer);
options.complete&&options.complete();
}
},30);
}
以上这篇无限循环轮播图之运动框架(原生JS实现)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。