官网地址:(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使用教程的更多相关文章

  1. Swiper.js使用及API介绍

    Swiper.js详细使用教程http://www.swiper.com.cn/api/start/2014/1218/140.html

  2. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

  3. 24个很赞的 Node.js 免费教程和在线指南

    JavaScript 最初是用来创建动态网站效果的的前端语言.而如今,这门脚本语言也可以用作后端开发,用于搭建 Web 服务器,开发接口,甚至创建博客.在下面这个列表中包括24个 Node.js 教程 ...

  4. Google Analytics统计代码GA.JS中文教程

    2010-12-06 11:07:08|  分类: java编程 |  标签:google  analytics  ga  js  代码  |举报|字号 订阅     Google Analytics ...

  5. iScroll.js和swiper.js

    最近系统地学习了iScroll.js和swiper.js,感觉它们在移动端特别好用:http://www.360doc.com/content/14/0724/11/16276861_39669990 ...

  6. iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)

                      上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从sw ...

  7. 【入门必备】最佳的 Node.js 学习教程和资料书籍

    Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...

  8. 【特别推荐】Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  9. Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

随机推荐

  1. window 操作 快捷键

    win 下在当前目录下打开cmd命令窗口: 方法一: 在当前目录下,按下shift + 鼠标右键,会出现“在此处打开命令窗口”的字样,然后点击即可. 方法二: 在该文件夹上,按下shift + 鼠标右 ...

  2. js 判断数据是否为空

    js 判断数据是否为空 // var a = ""; // var a = " "; // var a = null; // var a = undefined ...

  3. codevs1260 快餐问题

    题意: 一个套餐需要a个A,b个B,c个C. 你生产一个A需要t1,一个B需要t2,一个C需要t3时间. 你有n台机器.每台每天工作timei时间. 一件物品只能在一个机器上生产. 求你一天最多能生产 ...

  4. matlab无法打开.m文件查看

    maybe其它程序正在运行 Ctrl+C end the running code

  5. Day10--Python--动态传参,作用域

    python的三目运算a = 10b = 20c = a if a > b else b #先判断中间的条件a > b是否成立,成立返回if前面的值,不成立返回else后面的值,也可以 c ...

  6. Day8--Python--文件操作

    对文件内部的内容进行操作1.open('文件路径', mode='模式(默认是读r)', encoding='编码') 读取内容: f = open('d:/练习.txt', mode='r', en ...

  7. vue中显示静态图片怎么引用

    有多种方法解决这个问题: 首先,如果使用的是img标签那么可以这样 data () { return { img: require('path/to/your/source') } } 然后在temp ...

  8. HDU - 5952 Counting Cliques(DFS)

    A clique is a complete graph, in which there is an edge between every pair of the vertices. Given a ...

  9. assert的使用

    1.eclipse.myeclipse开启assert(断言),默认是关闭,如下: 说白了就是设置一下jvm的参数,参数是-ea或者-enableassertions 2.assert格式 (1)as ...

  10. 5款Mac极速下载工具推荐和下载

    最近几年用到下载工具的情况其实很少了,比如几年前我们可能经常用下载工具下载视频.音乐.图书等资源,但今天的我们更多的在线看视频.在线听音乐了,偶尔用到下载的时候直接用浏览器自带的下载工具也完全够用了, ...