让div运动起来 js实现缓动效果


Posted in Javascript onJuly 06, 2017

本文实例为大家分享了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');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
javascript打印输出json实例
Nov 11 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
微信小程序实现自定义底部导航
Nov 18 Javascript
老生常谈Bootstrap媒体对象
Jul 06 #Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 #jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 #jQuery
Textarea输入字数限制实例(兼容iOS&安卓)
Jul 06 #Javascript
react系列从零开始_简单谈谈react
Jul 06 #Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 #Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 #Javascript
You might like
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
JS 统计时间
2021/03/09 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
详解python3中的真值测试
2018/08/13 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
中国旅游网站:途牛旅游网
2019/09/29 全球购物
Final类有什么特点
2012/04/25 面试题
优秀共产党员先进事迹
2014/01/27 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
员工2014年度工作总结
2014/12/09 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
创业计划书之个人工作室
2019/08/22 职场文书