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使用教程的更多相关文章
- Swiper.js使用及API介绍
Swiper.js详细使用教程http://www.swiper.com.cn/api/start/2014/1218/140.html
- js模版引擎handlebars.js实用教程——目录
写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...
- 24个很赞的 Node.js 免费教程和在线指南
JavaScript 最初是用来创建动态网站效果的的前端语言.而如今,这门脚本语言也可以用作后端开发,用于搭建 Web 服务器,开发接口,甚至创建博客.在下面这个列表中包括24个 Node.js 教程 ...
- Google Analytics统计代码GA.JS中文教程
2010-12-06 11:07:08| 分类: java编程 | 标签:google analytics ga js 代码 |举报|字号 订阅 Google Analytics ...
- iScroll.js和swiper.js
最近系统地学习了iScroll.js和swiper.js,感觉它们在移动端特别好用:http://www.360doc.com/content/14/0724/11/16276861_39669990 ...
- iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)
上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从sw ...
- 【入门必备】最佳的 Node.js 学习教程和资料书籍
Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...
- 【特别推荐】Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
随机推荐
- 51Nod--1117 聪明的木匠(排序)
我们可以反过来想,如何将这几个线段组成一根 并且每次花费是组成的两段的和 #include<bits/stdc++.h> using namespace std; #define maxn ...
- 洛谷P1896 互不侵犯
又是一道状压DP求方案数的题... 多了一个放k个的限制,于是我们把数组多开一维. f[i][j][k]表示前i行放了j个,第i行状态为k的方案数. 然后老套路DFS转移,这次要多记录一个cnt表示上 ...
- [nowcoderACM_223C][区区区间间间]
题目链接 思路 考虑用单调栈,栈顶为最大元素.当得到一个新值得时候,将这个值宇栈顶比较.因为栈顶是前面的最大元素.所以只要当前元素比栈顶大,那么肯定比前面的都大.只要将这个元素乘上前面的个数就行了. ...
- R: 修改镜像、bioconductor安装及go基因富集分析
1.安装bioconductor及go分析涉及的相关包 source("http://bioconductor.org/biocLite.R") options(BioC_mirr ...
- Day9--Python--函数入门
函数神马是函数: 函数是对功能或动作的封装函数的定义: def 函数名(形参列表): #参数 函数体(return) 调用: ret = 函数名(实参列表) 函数名就是变量名: 函数名的命名规则:变量 ...
- sed 的|
#!/bin/bash/etc/init.d/nginx start && \sed -i "s|/project/env/|/${PROJ}/${ENVT}/|g" ...
- 《Apache kafka实战》读书笔记-管理Kafka集群安全之ACL篇
<Apache kafka实战>读书笔记-管理Kafka集群安全之ACL篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 想必大家能看到这篇博客的小伙伴,估计你对kaf ...
- Http接口开发(自测服务端客户端)
一. Http与Https的区别 1.概念 HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从www服务器传 ...
- centos6.5mini版安装及配置
1.安装选择界面,这个选第一个 2.镜像完整性检查,一般都是跳过SKIP 3.欢迎界面,进入安装了 4.语言选择,这个是没有中文的,用默认的英文就行 5.键盘布局,用默认的us 6.这里会给一个警告, ...
- initializer_list 列表初始化
initializer_list 列表初始化 用花括号初始化器列表初始化一个对象,其中对应构造函数接受一个 std::initializer_list 参数. #include <iostrea ...