无限循环轮播图之运动框架(原生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 相关文章推荐
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
Vue SSR 组件加载问题
May 02 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 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读取数据库信息的几种方法
2008/05/24 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
详解django自定义中间件处理
2018/11/21 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
Django的CVB实例详解
2020/02/10 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
户外婚礼策划方案
2014/02/08 职场文书
设计大赛策划方案
2014/06/13 职场文书
公司收款委托书范本
2014/09/20 职场文书
电影复兴之路观后感
2015/06/02 职场文书
行政处罚告知书
2015/07/01 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL