让div运动起来 js实现缓动效果
2017-07-06 09:11
871 查看
本文实例为大家分享了js实现缓动效果的具体代码,供大家参考,具体内容如下
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');
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- js实现缓动效果-让div运动起来
- js实现缓动效果-让div运动起来
- Div+css+js实现高度适应浏览器,做出的效果像winform
- JS+DIV实现鼠标划过切换层效果
- 用js实现缓冲运动效果
- js实现运动logo图片效果及运动元素对象sportBox使用方法
- js循环运动效果实现
- js+div实现的windows关机效果
- 分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
- 用js实现同一页面多个不同运动效果
- 在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
- div+js实现首尾相连循环滚动效果
- js实现div滑动收起效果
- 通过div透明度实现隐藏div图层效果、通过js控制缩放div效果
- JS实现DIV提示框的效果
- js 鼠标拖动对象 可让任何div实现拖动效果
- JS+DIV实现鼠标划过切换层效果
- 分享超简单实用的用JS实现DIV、图片圆角效果,关键是很兼容
- js + div 实现无缝隙滚动效果,从右向左循环显示
- 转载一个js实现div拖动效果