移动端开发(四):swiper.js
swiper.js中文网:http://www.swiper.com.cn/
文档结构
swiper.jquery.js 是需要引用jquery.js 或者 zepto.js 时,只需直接引用该文件即可,减少加载。
swiper.animate.js 使用animate.js的动画效果,使用方法:http://www.swiper.com.cn/usage/animate/index.html
基本使用方法
具体操作:http://www.swiper.com.cn/usage/index.html
1. 写基本html标签结构,结构中使用swiper.js的className;
2.书写js时,可直接调用某功能,但是前提必须是具有该功能的html标签存在在页面中;
3.使用swiper.js的样式,需应用swiper.css
API swiper.js版本3.0+
具体API:http://www.swiper.com.cn/api/start/2014/1218/140.html
1.初始化
var mySwiper = new Swiper('.swiper-contain',{
autoplay: , // 自动滑动
})
2. Basic (swiper一般选项)
主要包含:初始设置,滑动方向,速度,自动播放,视差效果,隐藏显示时的尺寸应用等。
3. Progress (进度)
标识silde的索引
4. Free Mode(free模式/抵抗反弹)
是否实现自动贴合,贴合期间的各个效果
5. Slide grid(网格分布)
properties 属性
移动端开发(四):swiper.js的更多相关文章
- 11-移动端开发教程-zepto.js入门教程
Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 1. Why Zepto.js? API类 ...
- 移动端开发利器vConsole.js,app内嵌H5开发时调试用
vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板,主要还是用于内嵌app页面时在手机上进行调试,打印完全和在PC端一样,方便大家找出问题所在. 不说废话直接进入主题,vConsol ...
- Swift3.0服务端开发(四) MySQL数据库的连接与操作
本篇博客我们来聊聊MySQL数据库的连接与操作.如果你本地没有MySQL数据库的话,需要你先安装MySQL数据库.在Mac OS中使用brew包管理器进行MySQL的安装是及其方便的.安装MySQL的 ...
- Swift3.0服务端开发(五) 记事本的开发(iOS端+服务端)
前边以及陆陆续续的介绍了使用Swift3.0开发的服务端应用程序的Perfect框架.本篇博客就做一个阶段性的总结,做一个完整的实例,其实这个实例在<Swift3.0服务端开发(一)>这篇 ...
- 大前端全栈CSS3移动端开发
作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正 本节课学习视频来源:https://ww ...
- 原生js开发,无依赖、轻量级的现代浏览器图片懒加载插件,适合在移动端开发使用
优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...
- html+js(swiper.js)+css左右滑动切换页面效果,适配移动端
demo: 截图: 结构:1.swiper-progress.html2.css文件夹 -swiper.css -swiper.min.css 3.js文件夹 -swiper.min.js -swip ...
- 使用swiper.js实现移动端tab切换
在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...
- 兼容pc端和移动端的轮播图插件 swiper.js
swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...
随机推荐
- 苹果新专利详解Apple Pay和NFC工作原理
本周,美国专利商标局公布了苹果一项名为“在移动支付过程中调节NFC的方法”专利申请.专利文件中详细描述了苹果Apple Pay功能以及NFC硬件构架和工作模式. 首先,苹果在专利文件中介绍了其无接触支 ...
- Android使用VideoView播放网络视频
Android支持播放网络上的视频.在播放网络上的视频时,牵涉到视频流的传输,往往有两种协议,一种是HTTP,一种是RTSP.这 两种协议最大的不同是,HTTP协议,不支持实时流媒体的播放,而RTSP ...
- Windows Azure 社区新闻综述(#70 版)
欢迎查看最新版本的每周综述,其中包含有关云计算和 Windows Azure 的社区推动新闻.内容和对话. 以下是过去一周基于您的反馈汇集在一起的内容: 文章.视频和博客文章 · 如何选择 No ...
- 04737_C++程序设计_第9章_运算符重载及流类库
例9.1 完整实现str类的例子. #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> ...
- VB6关于判断模态窗体的问题
模态窗体也有人叫模式窗体,是否为模态窗体由Show方法的参数决定: 语法 object.Show style, ownerform Show 方法的语法包含下列部分: 部分 描述 object 可选的 ...
- 今天,Java编程周末提高班(第一期)正式结束
Java编程周末提高班(第一期),走过了近两个月历程,一共同拥有68人次学生周末到老师家进行Java学习与交流.近距离的和一群年轻的学习接触,收获非常多,特别是对以后教学的改进.在学习的闲暇.大家自己 ...
- Android中实现ListView圆角效果[转]
本文演示如何Android中实现ListView圆角效果. 无论是网站,还是APP,人们都爱看一些新颖的视图效果.直角看多了,就想看看圆角,这几年刮起了一阵阵的圆角设计风:CSS新标准纳入圆角元素,特 ...
- 解决.net中截取字符串的汉字与数字还有静态扩展方法
转载 http://blog.163.com/cn_dreamgo/blog/static/52679452200961033212407/ 这两天在C#编程中应用到C#代码与C的代码信息交互,但 ...
- Bootstrap的aria-label与aria-labelledby
aria-label: 正常情况下,form表单的input组件都有对应的label,当input组件获取到焦点时,屏幕阅读器会读出相应label里的文本. 但是如果没有给输入框设置label时,当其 ...
- JavaScript之ClassName属性学习
在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式,你 ...