封裝運動框架
function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; }}function move(obj,json,options){ var options=options || {}; var duration=options.duration || 800; var easing=options.easing || 'linear'; var n=0; var start={}; var dis={}; var count=Math.ceil(duration/30); //{top:0,left:0} for(name in json){ start[name]=parseFloat(getStyle(obj,name)); dis[name]=json[name]-start[name]; } clearInterval(obj.timer); obj.timer=setInterval(function(){ n++; for(name in json){ switch (easing){ case 'linear': var a=n/count; var cur=start[name]+dis[name]*a; break; case 'ease-out': var a=1-n/count; var cur=start[name]+dis[name]*(1-a*a*a); break; case 'ease-in': var a=n/count; var cur=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實現)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答