无限循环轮播图之运动框架(原生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实现)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。