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

 更新时间:2017年10月01日 09:29:49   作者:NT.Wang  
下面小编就为大家带来一篇无限循环轮播图之运动框架(原生JS实现)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

封装运动框架

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实现)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Bootstrap每天必学之警告框插件

    Bootstrap每天必学之警告框插件

    Bootstrap每天必学之警告框插件,使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】

    JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】

    这篇文章主要介绍了JavaScript实现写入文件到本地的方法,结合实例形式分析了基于FileSaver.js插件实现保存文件到本地的相关操作技巧,并附带FileSaver.js插件完整源码,需要的朋友可以参考下
    2018-03-03
  • 深入浅出ES6之let和const命令

    深入浅出ES6之let和const命令

    这篇文章主要介绍了ES6中let和const命令的相关资料,非常不错,具有参考借鉴价值,对es6 let const相关知识感兴趣的朋友一起看下吧
    2016-08-08
  • Bootstrap popover 实现鼠标移入移除显示隐藏功能方法

    Bootstrap popover 实现鼠标移入移除显示隐藏功能方法

    下面小编就为大家分享一篇Bootstrap popover 实现鼠标移入移除显示隐藏功能方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • JavaScript实现简单计算器小功能

    JavaScript实现简单计算器小功能

    这篇文章主要为大家详细介绍了JavaScript实现简单计算器小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • javascript实现摄像头拍照预览

    javascript实现摄像头拍照预览

    这篇文章主要为大家详细介绍了javascript实现摄像头拍照预览,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • JavaScript实现跨浏览器的添加及删除事件绑定函数实例

    JavaScript实现跨浏览器的添加及删除事件绑定函数实例

    这篇文章主要介绍了JavaScript实现跨浏览器的添加及删除事件绑定函数,采用纯javascript实现jquery的bind及unbind添加与删除事件绑定的技巧,具有很好的浏览器兼容性,需要的朋友可以参考下
    2015-08-08
  • 正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)

    正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)

    这篇文章主要是对正则表达式中特殊符号及正则表达式的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JavaScript实现瀑布流布局的代码分享

    JavaScript实现瀑布流布局的代码分享

    不知道大家在线上购物的时候有没有发现到,自己逛起来根本就停不下来,越往下翻越是觉得就会出现需要的东西,这就是很多电商公司都在使用的瀑布流布局。本文就来用JS实现这一布局,需要的可以参考一下
    2023-04-04
  • 如何利用Three.js实现跳一跳小游戏

    如何利用Three.js实现跳一跳小游戏

    最近在公司写H5的3D游戏,选择了ThreeJS去做,做的过程中遇到了很多问题,下面这篇文章主要给大家介绍了关于如何利用Three.js实现跳一跳小游戏的相关资料,需要的朋友可以参考下
    2022-04-04

最新评论