讓div運動起來 js實現(xiàn)緩動效果
更新時間:2017年07月06日 09:11:02 作者:風(fēng)雨后見彩虹
讓div運動起來,這篇文章主要介紹了js實現(xiàn)緩動效果的相關(guān)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)緩動效果的具體代碼,供大家參考,具體內(nèi)容如下
var tween = {
linear:function(t,b,c,d){
return c*t/d + b;
},
easeIn:function(t,b,c,d){
return c * ( t /= d ) * t + b;
},
strongEaseIn:function(t,b,c,d){
return c * ( t /= d ) * t * t * t * t + b;
},
strongEaseOut:function(t,b,c,d){
return c * ( ( t = t / d -1 ) * t * t * t * t +1 ) + b;
},
sineaseIn:function(t,b,c,d){
return c * ( t /= d ) * t * t + b;
},
sineaseOut:function(t,b,c,d){
return c * ( ( t = t / d -1 ) * t * t *t +1 ) + b;
}
};
var Animate = function(dom){
this.dom = dom;
this.startTime = 0;
this.startPos = 0;
this.endPos = 0;
this.propertyName = null;
this.easing = null;
this.duration = null;
}
Animate.prototype.start = function(propertyName,endPos,duration,easing){
this.startTime = +new Date;
this.startPos = this.dom.getBoundingClientRect()[propertyName];
this.propertyName = propertyName;
this.endPos = endPos;
this.duration = duration;
this.easing = tween[easing];
var self = this;
var timeId = setInterval(function(){
if(self.step() === false){
clearInterval(timeId);
}
},19);
}
Animate.prototype.step = function(){
var t = +new Date;
if(t>=this.startTime + this.duration){
this.update(this.endPos);
return false;
}
var pos = this.easing(t-this.startTime, this.startPos, this.endPos - this.startPos, this.duration);
this.update(pos);
}
Animate.prototype.update = function(pos){
this.dom.style[this.propertyName] = pos + 'px';
}
var div = document.getElementById('div');
var animate = new Animate(div);
animate.start('left',500,1000,'strongEaseOut');
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解JS事件循環(huán)及宏任務(wù)微任務(wù)的原理
在js中,我們一般將所有的任務(wù)都分成兩類,一種是同步任務(wù),另外一種是異步任務(wù)。而在異步任務(wù)中,又有著更加細致的分類,那就是微任務(wù)和宏任務(wù)。本文將詳細講解這二者的原理與使用,需要的可以參考一下2022-05-05
JavaScript中去掉數(shù)組中的重復(fù)值的實現(xiàn)方法
百度面試時問的一道題目,蠻常規(guī)的,但是當(dāng)時自己的回答挺差勁的?,F(xiàn)在總結(jié)記錄下~2011-08-08
原生JavaScript實現(xiàn)Tooltip浮動提示框特效
這篇文章主要為大家詳細介紹了原生JavaScript設(shè)計和實現(xiàn)Tooltip浮動提示框特效,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03
JS實現(xiàn)的漢字與Unicode碼相互轉(zhuǎn)化功能分析
這篇文章主要介紹了JS實現(xiàn)的漢字與Unicode碼相互轉(zhuǎn)化功能,結(jié)合實例形式分析了javascript實現(xiàn)漢字與Unicode碼轉(zhuǎn)換相關(guān)操作技巧與注意事項,需要的朋友可以參考下2018-05-05
標(biāo)題過長使用javascript按字節(jié)截取字符串
在網(wǎng)頁展示中經(jīng)常會碰到,標(biāo)題過長,需要截取字符串,用CSS的實現(xiàn)的話各種兼容問題,下面為大家介紹下javascript如何按字節(jié)截取字符串2014-04-04

