首页 > 代码库 > 无限循环轮播图之运动框架(原生JS)
无限循环轮播图之运动框架(原生JS)
封装运动框架
1 function getStyle(obj,name){ 2 if(obj.currentStyle){ 3 return obj.currentStyle[name]; 4 }else{ 5 return getComputedStyle(obj,false)[name]; 6 } 7 } 8 function move(obj,json,options){ 9 var options=options || {}; 10 var duration=options.duration || 800; 11 var easing=options.easing || ‘linear‘; 12 var n=0; 13 var start={}; 14 var dis={}; 15 var count=Math.ceil(duration/30); 16 //{top:0,left:0} 17 for(name in json){ 18 start[name]=parseFloat(getStyle(obj,name)); 19 dis[name]=json[name]-start[name]; 20 } 21 22 clearInterval(obj.timer); 23 obj.timer=setInterval(function(){ 24 n++; 25 for(name in json){ 26 switch (easing){ 27 case ‘linear‘: 28 var a=n/count; 29 var cur=start[name]+dis[name]*a; 30 break; 31 case ‘ease-out‘: 32 var a=1-n/count; 33 var cur=start[name]+dis[name]*(1-a*a*a); 34 break; 35 case ‘ease-in‘: 36 var a=n/count; 37 var cur=start[name]+dis[name]*a*a*a; 38 break; 39 } 40 if(name==‘opacity‘){ 41 obj.style[name]=cur; 42 }else{ 43 obj.style[name]=cur+‘px‘; 44 } 45 } 46 if(n==count){ 47 clearInterval(obj.timer); 48 options.complete && options.complete(); 49 } 50 },30); 51 }
无限循环轮播图之运动框架(原生JS)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。