让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 相关文章推荐
jquery 表单取值常用代码
Dec 22 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
javascript实现五星评分功能
Nov 10 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
老生常谈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/03/20 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
python处理json数据中的中文
2014/03/06 Python
跟老齐学Python之重回函数
2014/10/10 Python
用python实现面向对像的ASP程序实例
2014/11/10 Python
详解Python中的条件判断语句
2015/05/14 Python
python中私有函数调用方法解密
2016/04/29 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
详解python进行mp3格式判断
2016/12/23 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
python装饰器原理与用法深入详解
2019/12/19 Python
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
杭州时比特电子有限公司SQL
2013/08/22 面试题
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
技校生自我鉴定范文
2013/09/26 职场文书
小学生成长感言
2014/01/30 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书