无限循环轮播图之运动框架(原生JS实现)
编程学习 2021-07-04 17:32www.dzhlxh.cn编程入门
狼蚁网站SEO优化长沙网络推广就为大家带来一篇无限循环轮播图之运动框架(原生JS实现)。长沙网络推广觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随长沙网络推广过来看看吧
封装运动框架
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实现)就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。