Swiper.js使用教程

上个礼拜,通过在制作公司产品介绍弹出框的过程,使用了强大的Swiper.js,官网地址:(http://www.swiper.com.cn/)。

一、Swiper.js简介:

Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。主要使用与移动端的网站、网页应用程序(web apps),以及原生的应用程序(native apps)。主要是为IOS而设计的,同时,在Android、WP8系统以及PC端的浏览器也有着良好的用户体验。

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

更多的介绍可以去官网地址:http://www.swiper.com.cn/查看。

也可以戳这里查看demo:http://www.swiper.com.cn/demo/index.html#

二、Swiper.js的版本区别

1、Swiper.js 3.x的版本。其主要适用对象为手机、app、webapp等移动终端。Swiper.js 3.0版本所采用了比较多的html5与CSS3的新特性,因此对PC端的浏览器兼容性并不是非常好,尤其是IE。在IE9以下(IE10没有测试过),Swiper.js 几乎等同于没有用,一点效果都没有。因此Swiper.js 3.0最适合用于移动端。

2、Swiper.js 2.x版本。Swiper.js 2.x版本对PC端的浏览器兼容性比较好,甚至支持IE7。其中的滑动效果在IE8都可以完美的运行。

具体看demo:http://swiper2.swiper.com.cn/demo/index.html

三、Swiper.js 有趣的功能

1、使用过程中,觉得Swiper.js能整合强大的css3动画效果插件:animate.css,详情请戳:http://daneden.github.io/animate.css/。Swiper.js结合Animate.css可以实现强大的动画效果,几乎无所不能。如果Animate.css的动画效果你不满意,你完全可以自己添加动画,用起来简直太棒了。

关于Animate.css的详细教程已经有人写得非常详细了,这里也就不累赘重复写了,直接转载地址:

css3动画简介以及动画库animate.css的使用

原文地址:https://www.cnblogs.com/superman66/p/4572841.html