首页 > 开发 > JS > 正文

无限循环轮播图之运动框架(原生JS实现)

2024-05-06 16:40:09
字体:
来源:转载
供稿:网友

封装运动框架

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武林网。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表