android滑屏事件监控 手机滑屏神器 |
您所在的位置：网站首页 › 滑屏特效软件 › android滑屏事件监控 手机滑屏神器 |
android滑屏事件监控 手机滑屏神器
|
一 ：为什么选择swiper？ 免费，开源，稳定，应用广泛。可单独使用无需jquery，也可以结合jquery一起使用。简单配置即可实现手机，平板网站的大部分触摸功能。包括焦点图，tab，触摸滑动导航等。 swiper是纯javascript打造的滑动特效插件，面向手机，平板电脑等移动终端。它能实现触屏焦点图，触屏tab切换，触屏多图切换等常用效果。主要使用于移动端的网站，移动web apps，native apps 和hybrid apps 。主要是为ios而设计的，同时，在安卓，wp8系统也有良好的用户体验，swiper3.0开始将不再全面支持PC端。因此，如果需要在PC上兼容更多的浏览器，可以选择swiper2.x（甚至支持ie7). 二:swiper使用方法（以下出自swiper官网）
1：首先加载插件：需要使用的文件有swiper.mim.js和swiper.mim.css文件。
1. 2. 3. 4. ... 5. 6. 7. 8. ... 9. 10. 11.
如果你的页面加载了jquery.jd或者zepto.js，你可以选择使用更轻便的swiper.jquery.mim.js 1. 2. 3. 4. ... 5. 6. 7. 8. ... 9. 10. 11. 12.2：html内容
1. 2. 3. Slide 1 4. Slide 2 5. Slide 3 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 导航等组件可以放在container之外 3：初始化swiper，最好是紧靠标签。
1. 2. mySwiper = new Swiper ('.swiper-container', { 3. direction: 'vertical', 4. loop: true, 5. 6. // 如果需要分页器 7. pagination: '.swiper-pagination', 8. 9. // 如果需要前进后退按钮 10. nextButton: '.swiper-button-next', 11. prevButton: '.swiper-button-prev', 12. 13. // 如果需要滚动条 14. scrollbar: '.swiper-scrollbar', 15. }) 16. 17.
如果不能写在html内容的后面，则需要在页面加载完成后再初始化。
1. 2. window.onload = function() { 3. ... 4. } 5. 或者这样（已经加载jquery和zepeto）
1. 2. $(document).ready(function () { 3. ... 4. }) 5.
三：一些常用的的配置选项
1：一般选项 direction：swiper的滑动方向，可设置水平horizontal或垂直vertical。默认：水平horizontal。
speed：滑动速度，即slider自动滑动开始到结束的时间（单位MS）默认：300。 autoplay：自动切换的时间间隔（单位ms），设定该参数slide不会自动切换。默认：0. freeMode：默认为false，slide滑动时滑动一格并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
scrollbar:出现滚动条。
1. 2. 3. Slide 1 4. Slide 2 5. Slide 3 6. 7. 8. 9. 10. var mySwiper = new Swiper('.swiper-container',{ 11. scrollbar:'.swiper-scrollbar', 12. }); 13.
scrollbarHide:滚动条是否自动隐藏，默认：ture会自动隐藏。
1. 2. var mySwiper2 = new Swiper('.swiper-container',{ 3. scrollbar:'.swiper-scrollbar' , 4. scrollbarHide:false, 5. }); 6.
preloadImages：默认为true，swiper会强制加载所有图片。
lazyLoading:设为true开启图片延迟加载，使preloadImages无效。需要将图片img标签的src改写成data-src，且增加类名swiper-lazy。 背景的延迟加载则增加属性增加属性data-background。 还可以为slide加一个预加载， 1.
1. 2. 3. 4. 
5.
6.
7.
8. 
9.
10.
11.
12. slide3
13.
14.
15.
16.
17. var mySwiper = new Swiper('.swiper-container',{
18. lazyLoading : true,
19. })
20. loop:设置为true则开启loop模式，loop模式：会在wrapper前后生成若干个slides让slides看起来是衔接的，用于无限循环切换。默认：false。
2：回调函数：
onInit(swiper)：初始化后执行。
onTouchStart(swiper,even):当碰触到slider（不管slider有没有移动）时执行。 onTouchMove（swiper）：手指触碰Swiper并滑动（手指）时执行。此时slide不一定会发生移动。 onTouchEnd(swiper, event)：当释放slider时执行，释放即执行，不管slide有没有移动 onSlideChangeStart(swiper):释放滑块时如果slider切换则执行。 onSlideChangeEnd(swiper):slide切换结束时执行。 onImagesReady(swiper):所有内置图像加载完成后执行。 onTransitionStart(swiper):slide过渡开始时触发。 onTransitionEnd(swiper):slide过渡结束时触发。 onTouchMoveOpposite (swiper, event):当手指触碰swiper并且没有按照direction设定的方向移动时执行。 onSilderMove(swiper, event onClick(swiper, event onTap(swiper, event onReachBeginning( swiper):swiper切换到初始位置时执行。 onReachEnd(swiper 四，举个例子---淘宝的抢购页面“淘抢购”
1. 2. 3. 4. 5. 6. Swiper demo 7. 8. 9. 10. 11. body{margin: 0;padding: 0} 12. .timeaxis-current:after { 13. content: ""; 14. position: absolute; 15. top: 100%; 16. left: 0; 17. right: 0; 18. z-index: 18; 19. display: block; 20. height: 0; 21. width: 0; 22. margin: auto; 23. border-top: 7px solid #fc353a; 24. border-left: 9px solid transparent; 25. border-right: 9px solid transparent; 26. } 27. #swiper-container3 { 28. width: 100%; 29. height: 60px; 30. 31. position: relative; 32. 33. left: 0; 34. }#swiper-container3 .swiper-slide { 35. height: 30px; 36. width: 100px!important; 37. font-size: 14px; 38. text-align: center; 39. color: #000; 40. } 41. .timeaxis-current { 42. position: absolute; 43. top: 0; 44. bottom: 0; 45. left: 40%; 46. right: 40%; 47. z-index: 1; 48. background: #fc353a; 49. } 50. .timeaxis_warp{position: relative; background: #2d3845;} 51. .timeaxis-item-inner{line-height: 20px;padding-top: 8px;} 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 17:00 64. 已开抢 65. 66. 67. 68. 69. 19:00 70. 已开抢 71. 72. 73. 74. 75. 21:00 76. 已开抢 77. 78. 79. 80. 81. 22:00 82. 已开抢 83. 84. 85. 86. 87. 23:00 88. 已开抢 89. 90. 91. 92. 93. 00:00 94. 已开抢 95. 96. 97. 98. 99. 06:00 100. 已开抢 101. 102. 103. 104. 105. 08:00 106. 已开抢 107. 108. 109. 110. 111. 10:00 112. 已开抢 113. 114. 115. 116. 117. 12:00 118. 已开抢 119. 120. 121. 122. 123. 13:00 124. 已开抢 125. 126. 127. 128. 129. 15:00 130. 已开抢 131. 132. 133. 134. 135. 17:00 136. 即将开场 137. 138. 139. 140. 141. 19:00 142. 即将开场 143. 144. 145. 146. 147. 21:00 148. 即将开场 149. 150. 151. 152. 153. 22:00 154. 即将开场 155. 156. 157. 158. 159. 23:00 160. 即将开场 161. 162. 163. 164. 165. 166. 167. 168. 169. 170. 171. var mySwiper = new Swiper('.swiper-container',{ 172. 173. slidesPerView : "auto",/*设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。*/ 174. freeMode : true, /*自动贴合*/ 175. freeModeSticky : true,/*自动贴合。*/ 176. centeredSlides : true,/*设定为true时，活动块会居中，而不是默认状态下的居左。*/ 177. slideToClickedSlide:true,/*设置为true则swiping时点击slide会过渡到这个slide。*/ 178. centeredSlides : true,/*设定为true时，活动块会居中，而不是默认状态下的居左。*/ 179. onInit: function(swiper){ /*回调函数，初始化后执行。*/ 180. $(".swiper-slide-active").css({ 181. "color": '#fff', 182. "font-weight": 'bold' 183. }); 184. }, 185. 186. onTransitionEnd: function(){ 187. /* alert( $(".swiper-slide-active").attr("data-num")); ajax传参数*/ 188. $(".swiper-slide-active").css({ 189. "color": '#fff', 190. "font-weight": 'bold' 191. }); 192. }, 193. onTouchMove: function(){ 194. $(".swiper-slide").not('.swiper-slide-active').css({ 195. "color": '#000', 196. "font-weight": 'normal' 197. }); 198. } 199. 200. }) 201. 202. 203. 204. 205. 效果
三：swiper animated 使用方法： swiper animated是swiper中文网提供的用于在swiper内快速制作css3动画效果的小插件，适用于swiper2.x和swiper3.x.
注意：此插件不适用于loop模式。
1：使用swiper animate需要先加载swiper.animate.mim.js和animate.mim.css。
1. 2. 3. 4. ... 5. 6. 7. 8. 9. ... 10. 11. 12. 13. 1. 2. mySwiper = new Swiper ('.swiper-container', { 3. onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit 4. swiperAnimateCache(swiper); //隐藏动画元素 5. swiperAnimate(swiper); //初始化完成开始动画 6. }, 7. onSlideChangeEnd: function(swiper){ 8. swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画 9. } 10. }) 11. 12. 3：在需要运动的元素上面增加类名 ani。 swiper animate需要指定的几个参数。
swiper-animate-effect：切换效果，例如：fadeInUp; swiper-animate-duration：可选，动画持续时间（单位秒）,如：0.5s; swiper-animate-delay：可选，动画延迟时间（单位秒），如0.3s.
1. 2. 内容 3. |
【本文地址】
今日新闻 |
推荐新闻 |