Swiper说明&&API手册 【中文手册Swiper】
原文地址:http://www.cnblogs.com/scavengers/p/3760449.html
示例:
- <link rel="stylesheet" href="css/swiper.css" type="text/css" media="screen" />
- <script src="js/swiper.js"></script>
- <div class="swiper-container">
- <div class="swiper-wrapper">
- <div class="swiper-slide"> </div>
- <div class="swiper-slide"> </div>
- <div class="swiper-slide"> </div>
- </div>
<div class="pagination"></div>- </div>
- <script>
- var widths=document.getElementById("SwipeTarget").clientWidth;
- var heights=widths*1.58;
- $("#SwipeTarget").height(function(){ return heights+"px";});
- $(".swiper-container").width(function(){ return widths+"px";});
- $(".swiper-container").height(function(){ return heights+"px";});
- var mySwiper =new Swiper('.swiper-container',{
- pagination: '.pagination',
- loop:false,
- autoplay:3500,
- autoplayDisableOnInteraction:true,
- autoplayStopOnLast:true,
- grabCursor: true,
- paginationClickable: true,
- onSlideChangeStart: function(){
- setTimeout(function(){
- $(".jx-words").eq(mySwiper.activeIndex).animate({top:"8%",opacity:1},800);
- },200);
- $(".jx-words").animate({top:"15%",opacity:0},0);
- }
- });
- </script>
最近使用Swipe.js,发现中文的资料很少,试着翻译了一下。能力有限,翻译难免错漏,欢迎指出,多谢!
翻译自:http://www.idangero.us/sliders/swiper/api.php
http://www.idangero.us/sliders/swiper/index.php
一了解Swiper
Swiper
是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话)。主要使用与移动端的网站、网页应用程序(web
apps),以及原生的应用程序(native
apps)。主要是为IOS而设计的,同时,在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。
特征(feature)
1、1:1触控运动
Swiper默认提供1:1的触控距离,当然,这个比率是可以设置的。(touchRatio)
2、触控模仿
这个功能对于开发桌面网站会很有用。简单来说,就是因为Swiper能够让鼠标事件表现得像触屏事件(点击以及拖曳滑块)
3、水平/垂直
Swiper运动主要有两种模式,horizontal(水平滑动)以及vertical(垂直运动的滑动)
4、自由模式(Free Mode)
这种模式下能够让slides 无需定位,就像通常的滑动条。(看下面的例子)
5、旋转调整 (rotation/resize)
Swiper 在移动设备旋转后能自适应尺寸。
6、响应式
能使用百分比的宽高定义slides,为移动端提供不同的解决方案。
7、滑动阻止
简单来说,就是,只能使用一种模式,水平或者垂直滑动。
8、抵抗反弹(resistant bounds)
Swiper能够提供一种机制,就是当滑动滑块超过最左以及最右(最上或最下)的位置时触发的一种抵御机制。
9、原生要素(native momentum)
有不少的原生东西提供给Swiper。
10、内建分页控制
Swiper能够快速生成内建的分页控制(pagination),指定html 某一标签为pagination,Swiper就能做很多东西了。
11、自动播放
只用设置延迟时间,Swiper就会自动地轮播slides直到你触碰该滑块(touch)为止。
12、循环模式(Loop mode)
该种模式下,你能够无限滑动滑块,到最后一个之后会跳转回第一个。
13、旋转模式(Carousel mode)
Swiper 能够让你在slides父容器下设置你所需要展示的slides数量。
14、滑动容器
在该特征下能够使用Swiper在一些简单的能滑动的区域里,没有slides。在Apps里十分有用。
15、嵌套Swipers
能够将Swipers嵌套入各种不同的Swiper 的slide里,例如垂直的或水平的。
16、任意的HTML 标签
可以将任一的HTML 内容放到slide里,不止仅限于图像。
17、硬件加速
swiper 使用硬件加速技术(如果该移动设备支持的话)能够得到良好流畅的动画效果以及优美的外观,尤其是在IOS设备里。
18、丰富的API
Swiper拥有丰富的API接口。(不过关于中文文档似乎不多,没找着。)能够让开发者生成个人独有的分页器(pagination),上下滑块的按钮
以及4个回调函数:onTouchStart,onTouchMove,onTouchEnd,onSlideSwitch。
19、灵活的配置
Swiper在初始化的时候能够接受多个参数以便让其尽可能的灵活。能够配置动画的速度(speed),模式(mode水平抑或垂直的),以及自由模式(free mode)...以及其他..
20、插件API(Plugins API)
Swiper从1.7版本开始就变得强大起来了,因为有更多而简单的插件API允许开发者创造属于自己的Swiper
插件或通过Swiper的核心创制hooks(挂钩)(该官网处提供了几款优秀的插件Swiper smooth progress, Swiper
hash navigation,swiper scrollbar)
21、良好的兼容性
Swiper通用性的测试环境:移动端的Safari(iOS5下),Android 2.1+,windows Phone 8,以及最新版本的谷歌浏览器(Chrome),Safari,Firefox,IE10 以及欧朋浏览器(Opera)
22、老版本IE的兼容
Swiper 2.x 开始,通过DOM动画,而非css transitions 兼容IE7 以上(需要包含jQuery),因为IE7不支持css3 transitions....简单来说,支持IE7 以上版本。
23、独立性
Swiper不依赖像jQuery那样的js类库,因此能够让Swiper更加的小型以及快速。所以Swiper能够很安全地应用诸如jQuery、jQuery Mobile,jQTouch等等其他的js类库。
24、超轻量级
压缩后仅仅10KB左右。
以上,就是Swiper能够做的,应用以上特征就使用原生属性方法能够快速生成令人惊叹的触控接口以及apps。
Usage: 1、下载swiper最新版本https://github.com/nolimits4web/Swiper 2、在HTML Head中添加Swiper's CSS and JS:
其中引用的文件名以下载的为准。 3、使用下面的HTML布局
4、打开下载的文件中的idangerous.swiper.css,设置Swiper's的宽度以及高度(在文件的末尾) /* 指定swiper 容器尺寸: */
5、初始化Swiper 在文档开始处,(或在窗口加载时)
API: new Swiper(container,options) container: 字符串要求,Swiper's容器的css选择器。在上面的HTML代码中就必须等于“.swiper-container”; options:-对象,可选择的。Swiper参数,详情见下: 用法:
返回拥有众多有用函数(functions)以及方法(methods)的对象: ·mySwiper.disableMousewheelControl()-滑动中禁掉鼠标滑轮(mousewheel control)控制 ·mySwiper.enableMousewheelControl()-能够使用禁掉了的鼠标滑轮 ·mySwiper.enableKeyboardControl()-滑动中键盘控制可用 ·mySwiper.disableKeyboardControl()-禁用滑动中键盘控制 ·mySwiper.swipeNext()-执行过渡动画到下一滑块(slide)(简单来说就是滑动到下一个页面) ·mySwiper.swipePrev()-执行过渡动画到上一滑块 ·mySwiper.swipeTo(index,speed,runCallbacks) - 执 行过渡到索引下标数字等于传入参数“index”的页面(slide)处,速度为传入的参数“speed”。同时可将“runCallbacks”设置为 false(默认为“true”),那么transition(过渡)不会产生onSlideChange回调函数。 ·mySwiper.browser.ie10 - 返回 “true”如果浏览器为IE10 ·mySwiper.browser.is8 -返回 “true”如果浏览器为IE8 ·mySwiper.support.touch -返回 “true”如果浏览器支持触屏 ·mySwiper.support.transforms -返回 “true”如果浏览器支持css3 transforms(变形) ·mySwiper.support.transforms3d -返回 “true”如果浏览器支持css3 3D transforms(变形) ·mySwiper.support.transitions -返回 “true”如果浏览器支持css3 transitions(过渡) ·mySwiper.activeSlide() - 返回当前活动块(slide)(slide 实例,HTML元素) ·mySwiper.clickedSlideIndex - 返回触控/点击块(slide)的索引(数字)。只适用于“onSlideTouch”和“onSlideClick” 回调函数中。 ·mySwiper.clickedSlide - 返回触控/点击块(slide)(slide实例,HTML元素)。只适于“onSlideTouch”和“onSlideClick” 回调函数中。 ·mySwiper.activeIndex- 返回当前活动块的索引(number) ·mySwiper.activeLoopIndex- 返回当前活动块在loop 模式下的索引(number) ·mySwiper.activeLoaderIndex- 返回当前活动块在loader模式下的索引(number) ·mySwiper.previousIndex- 返回上一个活动块的索引(number) ·mySwiper.startAutoplay()-开始自动播放。应用于自定义“Play”和“Pause”按钮 ·mySwiper.stopAutoplay()-停止自动播放。应用于自定义“Play”和“Pause”按钮 ·mySwiper.destroy(removeResizeEvent) - 移除所有绑定的事件监听(窗口的尺寸改变事件【如果removeResizeEvent的值不等于“false”】,容器(wrapper)的触控事件, 以及文档的鼠标事件),对于添加/移除滑块,页面到文档时非常有用,能够释放浏览器内存。 ·mySwiper.resizeFix()-调用这个方法当你改变swiper's 的尺寸而没有改变窗口大小时。 ·mySwiper.reInit()- 重新初始化Swiper。对于动态添加/移除滑块非常有用。 ·mySwiper.width 返回Swiper容器的宽度 ·mySwiper.height返回Swiper容器的高度 ·mySwiper.isTouched 返回布尔值,当触控该slide时返回“true” ·mySwiper.positions - 返回包含x,y坐标的wrapper对象 ·mySwiper.touches - 返回包含触控信息的对象数组 ·mySwiper.params - 获取对象初始化参数,能够在初始化之后改变/重写该参数,如: mySwiper.params.speed = 500; ·mySwiper.getWrapperTranslate(axis)- 返回当前容器“位移(translate)"【css3 transform ->translate】,即x,或y轴的偏移量。”axis“-参 数为字符串”x“或”y“,对应于水平模式及垂直模式。 ·mySwiper.setWrapperTranslate(x,y,z) - 手工设置css3 transform's translate 的值。x,y and z -为数字 ·mySwiper.wrapperTransitionEnd(callback,permanent) - 使 用该方法当Swiper ”transitionEnd“事件触发后能够自定义回调函数(在swipeNext,swipePrev,swipeTo 以 及swipeReset 函数之后): callback-函数(function)。默认状态下(如果permanent 值为false)transitions只执行一次 permanent - boolean . 默认状态下为false,当设置为真时该回调函数callback会执行多次。 选项(options) Swiper 初始化 支持下列中的参数
自由模式与滑块容器(Free Mode and Scroll Container)
块(slides)偏移
触屏/鼠标事件效应(Touch/mouse interactions )
Navigation
Pagination(分页器)(指示器)
命名空间namespace
回调函数(Callbacks)
Example 以下需要引用jQuery文件
Callbacks API 从Swiper2.4版本开始增加了一些回调函数,现在添加一些函数到上面。 当初始化Swiper时,旧版本指定回调函数的方式:
新版本中能够实现无需完全重写onSlideChangeStart参数,可以添加新函数到回调函数中。
你会发觉在过渡动画开始时弹出“Hello 1” 以及“Hello 2“,该种方式下addCallback方法需要注意该回调函数名不包含”on“。 解除(fire)callback 函数语句:
移除(remove)callbacks:
Slides API Swiper提供强大的Slides API,能够动态生成/删除/操作Slides(滑块) Slide 实例 这个实例是简单的HTML元素但扩展了非常有用的方法。 下面的例子变量mySwiper包含了属性和方法的Swiper对象。
通过调用一下方法,你能生成Swiper滑块实例: mySwiper.createSlide(html,slideClassList,element),其中:
"newSlide"变量包含在新建Slide实例之后,但如今还在内存中,并不在slider中。为了将其添加到slider中,能够使用一下链式方法有效地添加到Slide实例中:
还有一些有用的方法:
如果innerHTML没有指定,返回slide中inner html内容。
Swiper Slides 好的,让我们看看swiper是如何操作存在的slides(添加/移除)
html(string[字符型],required[必需的])-生成的滑块的HTML元素的内容 slideClassList(stirng[字符型],optional[可选的])- 创建类”class“属性。缺省值为"swiper-slide " element(string[字符型],optional[可选的])-创建滑块的HTML标签,缺省值为"div"
|
Swiper说明&&API手册 【中文手册Swiper】的更多相关文章
- Zepto,Zepto API 中文版,Zepto 中文手册,Zepto API,Zepto API 中文版,Zepto 中文手册,Zepto API 1.0, Zepto API 1.0 中文版,Zepto 1.0 中文手册,Zepto 1.0 API-translate by yaotaiyang
Zepto,Zepto API 中文版,Zepto 中文手册,Zepto API,Zepto API 中文版,Zepto 中文手册,Zepto API 1.0, Zepto API 1.0 中文版,Z ...
- socket.io 中文手册 socket.io 中文文档
socket.io 中文手册,socket.io 中文文档转载于:http://www.cnblogs.com/xiezhengcai/p/3956401.html 服务端 io.on('connec ...
- Opengl4.5 中文手册—A
因为opengl API 比较庞大,网络上还没有完整的.较新的opengl中文手册 这对很多人很不方便,所以整理了这一系列,用于帮助大家"快速浏览最新的opengl api" 为了 ...
- PHP HTML DOM 解析器 中文手册
简单的PHP HTML DOM 解析器 中文手册 | PHP Simple HTML DOM Parser中文手册 目录 快速入门 如何创建HTML DOM 对象? 如何查找HTML元素? 如何访问H ...
- Flask 中文手册 0.10 文档
Flask 中文手册 0.10 文档 欢迎使用 Flask 欢迎阅读 Flask 文档. 本文档分为几个部分.我推荐您先从 安装 开始,之后再浏览 快速入门 章节. 教程 比快速入门更详细地介绍了如何 ...
- sqlmap中文手册
Sqlmap中文手册 -Darren制作 零.前言 Sqlmap是十分著名的.自动化的SQL注入工具.为了较为系统地学习Sqlmap,我决定翻译一遍Sqlmap的用户手册,于是便有了此文.由于我英语 ...
- ColyseusJS 轻量级多人游戏服务器开发框架 - 中文手册(上)
快速上手多人游戏服务器开发.后续会基于 Google Agones,更新相关 K8S 运维.大规模快速扩展专用游戏服务器的文章.拥抱️原生 Cloud-Native! 快速开始 在开始之前,让我们确保 ...
- ColyseusJS 轻量级多人游戏服务器开发框架 - 中文手册(中)
快速上手多人游戏服务器开发.后续会基于 Google Agones,更新相关 K8S 运维.大规模快速扩展专用游戏服务器的文章.拥抱️原生 Cloud-Native! 系列 ColyseusJS 轻量 ...
- ColyseusJS 轻量级多人游戏服务器开发框架 - 中文手册(下)
快速上手多人游戏服务器开发.后续会基于 Google Agones,更新相关 K8S 运维.大规模快速扩展专用游戏服务器的文章.拥抱️原生 Cloud-Native! 系列 ColyseusJS 轻量 ...
- ColyseusJS 轻量级多人游戏服务器开发框架 - 中文手册(系统保障篇)
快速上手多人游戏服务器开发.后续会基于 Google Agones,更新相关 K8S 运维.大规模快速扩展专用游戏服务器的文章.拥抱️原生 Cloud-Native! 系列 ColyseusJS 轻量 ...
随机推荐
- oncontextmenu事件
oncontextmenu的作用是阻止浏览器默认的鼠标右键行为. 阻止弹出右键自带菜单 document.oncontextmenu=function(){ console.log('你点击了右键') ...
- 安卓解析json,使用BaseAdapter添加至ListView中,中间存储用JavaBean来实现
这是一个小练习,要求解析一个提供的json文件.并将其中的id,title值获取,以ListView形式展示出来.(开发工具是android studio) 下面开始: 首先我想到的是先把json文件 ...
- 使用scp在windows和Linux之间互传文件
转自:http://yangzhongfei.blog.163.com/blog/static/4610987520103141050918/ 为了进行系统维护操作,有时需要再windows和linu ...
- JS对象深刻理解 - 2
JavaScript prototype 用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性, ...
- vs快捷键
原文地址 ctrl是强制功能键,shift有给项目增加功能作用 1. 窗口快捷键 : window Ctrl+W,W: 浏览器窗口 (window shopping ) Ctrl+W,S: 解决方案 ...
- WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED
原文地址:http://linuxme.blog.51cto.com/1850814/375752 今天将阿里云服务器更换了一下系统盘,重启成功后,再次通过终端访问阿里云的公网IP报以下信息: @@@ ...
- javascript 随笔
document.execCommand("SaveAs",true,"aaa"); //将当前web页面另存为文件.第三个参数为文件名,可以自己设置,为空的时 ...
- Seo标签权重
最近接手凤凰焦点的业务,首先做的现有线上业务梳理,接着是拆分模块. 页头部分有些争议.假设把页头做成一个组件,pc端因为不能页面加载的差不多了页头才突兀的出来一是体验不好,还有不利于seo,最终决定还 ...
- GCD 开发
一.简介 GCD 的全称是 Grand Centre Dispatch 是一个强大的任务编程管理工具.通过GCD你可以同步或者异步地执行block.function. 二.dispatch Queue ...
- weex 小结 -- <list>
可以包含各种子组件 <refresh style="width:750;padding:30;flex-direction:row;justify-content:center;&qu ...