封裝運動框架
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實現)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
