讓div運(yùn)動(dòng)起來(lái) js實(shí)現(xiàn)緩動(dòng)效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)緩動(dòng)效果的具體代碼,供大家參考,具體內(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');
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript緩動(dòng)動(dòng)畫(huà)函數(shù)的封裝方法
- js實(shí)現(xiàn)緩動(dòng)動(dòng)畫(huà)
- JavaScript實(shí)現(xiàn)緩動(dòng)動(dòng)畫(huà)
- tween.js緩動(dòng)補(bǔ)間動(dòng)畫(huà)算法示例
- js實(shí)現(xiàn)帶緩動(dòng)動(dòng)畫(huà)的導(dǎo)航欄效果
- JS+HTML5手機(jī)開(kāi)發(fā)之滾動(dòng)和慣性緩動(dòng)實(shí)現(xiàn)方法分析
- javascript 45種緩動(dòng)效果 非???/a>
- javascript中的緩動(dòng)效果實(shí)現(xiàn)程序
- javascript實(shí)現(xiàn)左右緩動(dòng)動(dòng)畫(huà)函數(shù)
相關(guān)文章
JavaScript仿flash遮罩動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript仿flash遮罩動(dòng)畫(huà)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象(1)
這篇文章主要介紹了JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象,對(duì)創(chuàng)建對(duì)象進(jìn)行了詳細(xì)描述,感興趣的小伙伴們可以參考一下2015-12-12Bootstrap基本組件學(xué)習(xí)筆記之input輸入框組(9)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之input輸入框組,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過(guò)特效
這篇文章主要介紹了使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過(guò)特效的方法,需要的朋友可以參考下2015-01-01獲取url中用&隔開(kāi)的參數(shù)實(shí)例(分享)
下面小編就為大家?guī)?lái)一篇獲取url中用&隔開(kāi)的參數(shù)實(shí)例(分享)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05echarts使用中關(guān)于y坐標(biāo)軸無(wú)法正常顯示的問(wèn)題解決記錄
Echarts是由百度提供的數(shù)據(jù)可視化解決方案,下面這篇文章主要給大家介紹了關(guān)于echarts使用中關(guān)于y坐標(biāo)軸無(wú)法正常顯示的問(wèn)題解決記錄,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12fix-ie5.js擴(kuò)展在IE5下不能使用的幾個(gè)方法
fix-ie5.js擴(kuò)展在IE5下不能使用的幾個(gè)方法...2007-08-08