js轮播插件
// 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轮播插件的更多相关文章
- js 轮播插件
flexslider pc插件 个人用过 flickerplate 移动端插件 个人用过 个人觉得比较好的移动端插件 swiper http://www.swiper.com.cn/ 用过 个人觉 ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 纯js写图片轮播插件
最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
- 推荐:图片轮播插件Nivo Slider
因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是,这款插件是在MIT协议下免费的. ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- js-自制轮播插件!
刚接触轮播的时候,感觉这种东西好高端,后来学习了jquery后,发现原来挺简单的,而且实现轮播也有很多形式,我用jquery自制了一个轮播插件,其实我这个说是插件,好像其实就是一个高度抽象的函数而已. ...
- owl-carousel轮播插件的使用
插件github地址:https://github.com/OwlFonk/OwlCarousel: 插件官网演示地址:http://owlgraphic.com/owlcarousel/: 1.选择 ...
- 图片轮播插件-carouFredSel
carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
随机推荐
- ios数据持久化(转)
文件系统 归档和序列化 数据库 1.文件系统 不管是Mac OS X 还是iOS的文件系统都是建立在UNIX文件系统基础之上的. 1.1 沙盒模型 在iOS中,一个App的读写权限只局限于自己的沙盒目 ...
- antd中fomr中resetFields清空输入框
1.如果没有initValue的情况下,直接使用resetFields可以清空文本框的值 2.如果是有initValue的情况下,直接使用resetFields方法会直接重置为initValue的值 ...
- 升级 macOS Mojave 后部分软件 (如 VS Code) 字体变虚的解决方法
目前有些朋友的设备可能还是“非 Retina” 显示器,那这样如果升级到 Mojave 后你会发现文字不清晰了,这是因为 Mojave 默认关闭了文字次像素渲染字体,你需要在终端里执行: defaul ...
- ubunttu-sh: 1: pause: not found
old code: //in ubuntu OS system("pause"); error discription: : pause: not found right code ...
- 20155328 2016-2017-2 《Java程序设计》第5周学习总结
教材学习内容总结 程序设计本身的错误,建议使用Exception或其子类实例来表现. Java中所有错误都会被打包成对象. 如果父类异常对象在子类异常对象前被捕捉,则catch子类异常对象的区块将永远 ...
- HPU 1471:又是斐波那契数列??(大数取模)
1471: 又是斐波那契数列?? 时间限制: 1 Sec 内存限制: 128 MB 提交: 278 解决: 27 统计 题目描述 大家都知道斐波那契数列吧?斐波那契数列的定义是这样的: f0 = 0; ...
- Spring学习--静态工厂方法、实例工厂方法创建 Bean
通过调用静态工厂方法创建 bean: 调用静态工厂方法创建 bean 是将对象创建的过程封装到静态方法中 , 当客户端需要对象时 , 只需要简单地调用静态方法 , 而不需要关心创建对象的细节. 要声明 ...
- vim golang 插件
最好用的vim golang 插件 可自动缩进 git clone git@github.com:aimin/InstallvimGo.git
- PHP安装sqlsrv和memcache扩展步骤
做了两天的实验才终于摸清楚如何将PHP连接上sqlserver数据库,以及怎样通过修改virtualhost文件来重定向,因为走得弯路比较多所以很想分享一下这次的心路历程. 第一步:安装wamp等类似 ...
- 命令行net time同步时间(内网)
首先还是推荐大家使用Internet时间来同步自己计算机的时间,这样做主要是方便,就是设置一个ntp服务器,我推荐下面的三个ntp服务器地址. time.asia.apple.com //亲测有效 a ...