码迷,mamicode.com
首页 > Web开发 > 详细

Swiper.js使用教程

时间:2015-06-13 06:14:53      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:

上个礼拜,通过在制作公司产品介绍弹出框的过程,使用了强大的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的使用

Swiper.js使用教程

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!