本文分享自http://www.cnblogs.com/scavengers/p/3760449.html
---------------------------华丽的分割线----------------------------------
最近使用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、丰富的APISwiper拥有丰富的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、在HTMLHead中添加Swiper'sCSSandJS: 1 <head>2 ....3 <link rel="stylesheet" href="path_to_css/idangerous.swiper.css">4 <script defer src="path_to_js/idangerous.swiper-2.x.min.js"> </script>5 ....6 </head> 其中引用的文件名以下载的为准。 3、使用下面的HTML布局 1 <div class="swiper-container"> 2 <div class="swiper-wrapper"> 3 <!--First Slide--> 4 <div class="swiper-slide"> 5 <!-- 这里添加第一个HTML内容 --> 6 </div> 7 <!--Second Slide--> 8 <div class="swiper-slide"> 9 <!-- 这里添加第二个HTML内容 -->10 </div> 11 <!--Third Slide-->12 <div class="swiper-slide"> 13 <!-- 这里添加第三个HTML内容 -->14 </div>15 <!--Etc..-->16 </div>17 </div> 4、打开下载的文件中的idangerous.swiper.css,设置Swiper's的宽度以及高度(在文件的末尾) /*指定swiper容器尺寸:*/ .swiper-container, .swiper-slide { width: 500px; height: 200px;} 5、初始化Swiper在文档开始处,(或在窗口加载时) 1 <script type="text/javascript"> 2 /*====== 3 使用文档添加事件或窗口加载事件 4 例如: 5 window.onload = function() { ...代码 ...} 6 或者document.addEventListener('DOMContentLoaded', function(){ ...代码... }, false) 7 =======*/ 8 window.onload = function() { 9 var mySwiper = new Swiper('.swiper-container',{10 //添加需要的选项:11 mode:'horizontal',12 loop: true 13 //等等..14 }); 15 }16 })17 </script> API: newSwiper(container,options) container:字符串要求,Swiper's容器的css选择器。在上面的HTML代码中就必须等于“.swiper-container”; options:-对象,可选择的。Swiper参数,详情见下: 用法: 1 var mySwiper = new Swiper(".swiper-container",{2 speed:750,3 mode:"vertical"4 }) 返回拥有众多有用函数(functions)以及方法(methods)的对象: ·mySwiper.disableMousewheelControl()-滑动中禁掉鼠标滑轮(mousewheelcontrol)控制 ·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”如果浏览器支持css3transforms(变形) ·mySwiper.support.transforms3d-返回“true”如果浏览器支持css33Dtransforms(变形) ·mySwiper.support.transitions-返回“true”如果浏览器支持css3transitions(过渡) ·mySwiper.activeSlide()-返回当前活动块(slide)(slide实例,HTML元素) ·mySwiper.clickedSlideIndex-返回触控/点击块(slide)的索引(数字)。只适用于“onSlideTouch”和“onSlideClick” 回调函数中。 ·mySwiper.clickedSlide-返回触控/点击块(slide)(slide实例,HTML元素)。只适于“onSlideTouch”和“onSlideClick” 回调函数中。 学习交流
热门图片
猜你喜欢的新闻
新闻热点 2024-04-27 13:35:46
2024-04-27 13:33:47
2024-04-24 22:53:44
2024-04-23 19:32:50
2024-04-23 19:25:50
2024-04-23 19:13:19
疑难解答 |