无限循环轮播图之运动框架(原生JS实现)


Posted in Javascript onOctober 01, 2017

封装运动框架

function getStyle(obj,name){
 if(obj.currentStyle){
 return obj.currentStyle[name];
 }else{
 return getComputedStyle(obj,false)[name];
 }
}
function move(obj,json,options){
 var options=options || {};
 var duration=options.duration || 800;
 var easing=options.easing || 'linear';
 var n=0;
 var start={};
 var dis={};
 var count=Math.ceil(duration/30);
 //{top:0,left:0}
 for(name in json){
 start[name]=parseFloat(getStyle(obj,name));
 dis[name]=json[name]-start[name];
 }

 clearInterval(obj.timer);
 obj.timer=setInterval(function(){
 n++;
 for(name in json){
  switch (easing){
  case 'linear':
   var a=n/count;
   var cur=start[name]+dis[name]*a;
   break;
  case 'ease-out':
   var a=1-n/count;
   var cur=start[name]+dis[name]*(1-a*a*a);
   break;
  case 'ease-in':
   var a=n/count;
   var cur=start[name]+dis[name]*a*a*a;
   break;
  }
  if(name=='opacity'){
  obj.style[name]=cur;
  }else{
  obj.style[name]=cur+'px';
  }
 }
 if(n==count){
  clearInterval(obj.timer);
  options.complete && options.complete();
 }
 },30);
}

以上这篇无限循环轮播图之运动框架(原生JS实现)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 #Javascript
原生js封装运动框架的示例讲解
Oct 01 #Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 #Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 #Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 #Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 #Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 #Javascript
You might like
PHP集成FCK的函数代码
2008/09/27 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
php 浮点数比较方法详解
2017/05/05 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
在Python中使用SQLite的简单教程
2015/04/29 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
创建Django项目图文实例详解
2019/06/06 Python
python输出带颜色字体实例方法
2019/09/01 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
小学生运动会报道稿
2014/09/12 职场文书
房屋租房协议书范本
2014/12/04 职场文书
单位同意报考证明
2015/06/17 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
修改并编译golang源码的操作步骤
2021/07/25 Golang