无限循环轮播图之运动框架(原生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加密解密7种方法总结分析
Oct 07 Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
js日历功能对象
Jan 12 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
js charAt的使用示例
Feb 18 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 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
服务器端解压缩zip的脚本
2006/12/22 PHP
PHP memcache扩展的三种安装方法
2009/04/26 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
关于this和self的使用说明
2010/08/01 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
JS判定是否原生方法
2013/07/22 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
ExpressJS入门实例
2015/01/14 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
python中私有函数调用方法解密
2016/04/29 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
Python 爬虫性能相关总结
2020/08/03 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
挂职自我鉴定
2014/02/26 职场文书
村容村貌整治方案
2014/05/21 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书