// Tween算法
  var Tween = {
    // t:当前步数
    // b:初始位置
    // c:总距离
    // d:总步数
    // Linear:匀速
  Linear: function(t,b,c,d){ return c*t/d + b; },
    // 平方缓动动画
    Quad: {
      // 加速
      easeIn: function(t,b,c,d){
        return c*(t/=d)*t + b;
      },
      // 减速
      easeOut: function(t,b,c,d){
        return -c *(t/=d)*(t-2) + b;
      },
      // 现加速后减速
      easeInOut: function(t,b,c,d){
        if ((t/=d/2) < 1) return c/2*t*t + b;
        return -c/2 * ((--t)*(t-2) - 1) + b;
      }
    },
  // 三次方缓动动画
  Cubic: {
    easeIn: function(t,b,c,d){
      return c*(t/=d)*t*t + b;
    },
    easeOut: function(t,b,c,d){
      return c*((t=t/d-1)*t*t + 1) + b;
    },
    easeInOut: function(t,b,c,d){
      if ((t/=d/2) < 1) return c/2*t*t*t + b;
      return c/2*((t-=2)*t*t + 2) + b;
    }
  },
  // 四次方缓动动画
  Quart: {
    easeIn: function(t,b,c,d){
      return c*(t/=d)*t*t*t + b;
    },
    easeOut: function(t,b,c,d){
      return -c * ((t=t/d-1)*t*t*t - 1) + b;
    },
    easeInOut: function(t,b,c,d){
      if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
      return -c/2 * ((t-=2)*t*t*t - 2) + b;
    }
  },
  // 五次方缓动动画
  Quint: {
    easeIn: function(t,b,c,d){
      return c*(t/=d)*t*t*t*t + b;
    },
    easeOut: function(t,b,c,d){
      return c*((t=t/d-1)*t*t*t*t + 1) + b;
    },
    easeInOut: function(t,b,c,d){
      if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
      return c/2*((t-=2)*t*t*t*t + 2) + b;
    }
  },
  // 正弦缓动动画
  Sine: {
    easeIn: function(t,b,c,d){
      return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
    },
    easeOut: function(t,b,c,d){
      return c * Math.sin(t/d * (Math.PI/2)) + b;
    },
    easeInOut: function(t,b,c,d){
      return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
    }
  },
  // 指数缓动动画
  Expo: {
    easeIn: function(t,b,c,d){
      return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
    },
    easeOut: function(t,b,c,d){
      return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
    },
    easeInOut: function(t,b,c,d){
      if (t==0) return b;
      if (t==d) return b+c;
      if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
      return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
    }
   },
  // 圆形缓动动画
  Circ: {
      easeIn: function(t,b,c,d){
        return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
      },
      easeOut: function(t,b,c,d){
        return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
      },
      easeInOut: function(t,b,c,d){
        if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
        return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
      }
    },
  // 指数衰减
  Elastic: {
    easeIn: function(t,b,c,d,a,p){
      if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
      if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
      else var s = p/(2*Math.PI) * Math.asin (c/a);
      return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    },
    easeOut: function(t,b,c,d,a,p){
      if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
      if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
      else var s = p/(2*Math.PI) * Math.asin (c/a);
      return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
    },
    easeInOut: function(t,b,c,d,a,p){
    if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
    if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
    }
  },
  // 超出范围的三次方缓动动画
  Back: {
    easeIn: function(t,b,c,d,s){
      if (s == undefined) s = 1.70158;
      return c*(t/=d)*t*((s+1)*t - s) + b;
    },
    easeOut: function(t,b,c,d,s){
      if (s == undefined) s = 1.70158;
      return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    },
    easeInOut: function(t,b,c,d,s){
      if (s == undefined) s = 1.70158;
      if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
      return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    }
  },
  // 反弹
  Bounce: {
    easeIn: function(t,b,c,d){
      return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
    },
    easeOut: function(t,b,c,d){
      if ((t/=d) < (1/2.75)) {
      return c*(7.5625*t*t) + b;
      } else if (t < (2/2.75)) {
      return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
      } else if (t < (2.5/2.75)) {
      return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
      } else {
      return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
      }
    },
      easeInOut: function(t,b,c,d){
        if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
        else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
      }
    }
  };

js轮播插件的更多相关文章

  1. js 轮播插件

    flexslider pc插件 个人用过 flickerplate 移动端插件 个人用过 个人觉得比较好的移动端插件 swiper  http://www.swiper.com.cn/  用过 个人觉 ...

  2. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  3. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  4. 推荐:图片轮播插件Nivo Slider

          因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是,这款插件是在MIT协议下免费的.        ...

  5. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  6. js-自制轮播插件!

    刚接触轮播的时候,感觉这种东西好高端,后来学习了jquery后,发现原来挺简单的,而且实现轮播也有很多形式,我用jquery自制了一个轮播插件,其实我这个说是插件,好像其实就是一个高度抽象的函数而已. ...

  7. owl-carousel轮播插件的使用

    插件github地址:https://github.com/OwlFonk/OwlCarousel: 插件官网演示地址:http://owlgraphic.com/owlcarousel/: 1.选择 ...

  8. 图片轮播插件-carouFredSel

    carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...

  9. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

随机推荐

  1. python笔记04:字典

    4.1 字典的使用 字典:通过名字来引用值的数据结构,又称为映射 字典中的值并没有特殊的顺序,但是都存储在一个特定的键下 字典提供的功能:快速查找特定键值对应关系   某些情况下,字典比列表更好用一些 ...

  2. 关于edge detecte

    1.注意render Texture 双击render Texture ,要勾选 use viewport dimensions,否则出现边框和模型不合的情况 2.注意edge detecte 的状态 ...

  3. Maven入门-5.Maven的聚合和继承

    1.Maven的聚合1.1 聚合的配置2.Maven的继承2.1 可被继承的POM元素2.2 POM中使用继承2.3 继承dependency 1.Maven的聚合 在Maven入门-4.Maven的 ...

  4. 和不安全的Android说再见,Google为它添加新铠甲

    伴随着最近被曝出的Heartbleed漏洞,安全问题再次成为网络上的热点话题.虽然Android的安全性并没有外界传言的那样脆弱,但Google还是在继续为其增加防护措施.根据Android官方博客的 ...

  5. mysql_query — 发送一条 MySQL 查询

    仅对 SELECT,SHOW,EXPLAIN 或 DESCRIBE 语句返回 一个资源标识符,如果查询执行不正确则返回 FALSE.对于 其它类型的 SQL 语句,在执行成功时返回 TRUE,出错时返 ...

  6. struts2 MVC模式

    在学习struts2之前首先了解一下MVC模式. MVC是一个设计模式,它强制性的使应用程序的输入.处理和输出分开.使用MVC应用程序被分成三个核心部件:模型.视图.控制器.它们各自处理自己的任务.分 ...

  7. TimeSpan格式化字符串格式(摘)

    一直在用DateTime, 却不常用TimeSpan , 今天突然用到了, 发现不知道咋做格式化...百度一下,找到了答案, 在这记录一下, 免得以后找花费时间 以下内容摘抄自 Microsoft D ...

  8. 【leetcode】2-AddTwoNums

    problem: Add Two Numbers 需要学习的是单向链表的基础使用:

  9. 使用rewrite 让php 实现类似asp.net 的IHttpModule 进行带参数js文件的参数获取

    asp.net 的IHttpModule 接口具有很大的作用,我们可以使用实现的模块进行全局的控制,但是在学习php 的过程中也想实现类似的功能,查找php 的文档,自己没有找到, 但是我们大家应该知 ...

  10. 【转】每天一个linux命令(15):tail 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/11/07/2758084.html tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f ...