时间:2021-07-01 10:21:17 帮助过:31人阅读
封装运动框架
- 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实现)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。