移动web最简洁的滑动效果Swipe JS(适合初学者)

最近要做一个移动web的项目,前端后端都自己一人来搞。由于之前一直是做后端的开发,没涉及过前端的开发,甚是无从下手,但又不得不去弄,于是乎,先把w3school上前端相关的html、js、css都预览了一遍,然后在仿照别人的站点自己尝试着去实现。

虽然很多人都是前台很简单,没啥搞的(至少像我做后台的那些同事这么认为),但是真正开始弄起来,还是有些困难的,要做到美观易用,更得下工夫研究里面的所以然。

 

以下是我要实现一个在手机上滑动(图片,文字等)的效果。我先是把别人的页面下载下来,然后根据它的在页面呈现出来的“模块”进行切割,把各个模块单独提起出来,这样做:(1)理解页面的布局;(开始的时候,在怀疑,前、后台开发的思维模式是否不一样,因为一开始的时候,看页面的那些html、css、js实在晕,而且感觉代码也很凌乱)(2)熟悉html标签和css、js的用法;(这个需要花费一定的时间去熟悉每个标签的特性和用法)。

这个示例,就是我提取出来后,把原来多余的css等删除,仅仅保留滑动效果最简洁的部分,由于刚接触,在描述和理解上有不妥的地方,还烦请指正 :)

 

一、先简要说下swipe.js(参见:http://swipejs.com/)

之所以用到这个js,主要是:

(1)我在百度里搜索“页面滑动”等关键词时,就出现了它老人家。

(2)在我下载下来别人滑动页面里面也用到了它。

 

二、如何使用

swipe是一个纯的javascript,里面没用到任何的其他的js框架(由于时间问题,里面的东西没很细研究,以后有时间了,再来学习),要实现移动端的滑动,必须要的元素有:

(1)html,这个当然不必说

(2)css,需要一定的css做样式。swipe里面会查找关键标签的样式,根据样式来现实

(3)js,这里面有自己定义和实现的js function

 

以下分别对上面的3大块进行描述:

(1)html。必须的html有:

 

[html] view plaincopy技术分享技术分享
 
  1. <div id="slider" class="swipe" style="visibility:visible;">  
  2.     <div class="swipe-wrap">  
  3.         <figure>  
  4.             <div>  
  5.                 <img src="img/1.JPG" width="100%" height="100%" />  
  6.             </div>  
  7.         </figure>  
  8.         <figure>  
  9.             <div>  
  10.                 <img src="img/9.JPG" width="100%" height="100%" />  
  11.             </div>              
  12.         </figure>  
  13.     </div>  
  14. </div>  

【1】最外层的div的id是自定义的,这个是需要传入到swipe中的

【2】最外层div的class="swipe"和第二层div的class="swipe-wrap"是写死的,swipe会查找这两个样式然后做相应的处理

【3】第三层的figure,就是我们要滑动元素的单元。

【4】之后我们的要滑动的内容,就是以figure为单位进行的

 

(2)css。必须的css有:

[html] view plaincopy技术分享技术分享
 
  1. <style>  
  2. .swipe {  
  3.     overflow: hidden;  
  4.     visibility: hidden;  
  5.     position: relative;  
  6. }  
  7. .swipe-wrap {  
  8.     overflow: hidden;  
  9.     position: relative;  
  10. }  
  11. .swipe-wrap > figure {  
  12.     float: left;  
  13.     width: 100%;  
  14.     position: relative;  
  15. }  
  16. #slider {  
  17.     max-width: 650px;/* 设置最大的宽度 */  
  18.     margin: 0px auto; /* 居中对齐 */  
  19. }  
  20. figure {  
  21.     margin: 0;/* 对齐,四周宽度都为0,在轮播的时候,以整张图片进行移动 */  
  22. }  
  23. </style>  

【1】swipe、swipe-wrap、swipe-wrap > figure,这3个是swipe必须要使用到的,而且里面的样式最好也不要改动(感兴趣的同学可以试着去改动,看会呈现什么效果,蛮好玩的 :))

【2】#slider是我自己设定的,用于整个空间居中

【3】figure样式也是自己设定的,但是是必须的,指定所有的figure对齐方式,而且只能设置为0,否则在滑动图片的时候会出现位置的错乱。(为什么会错乱,自己简单研究了下,swipe滑动宽度的像素是根据最外层div的宽度,如果figure的margin没有设置为0,而有间隔时,滑动的宽度就不会是一整张的figure了(figure之间存在空虚))

 

(3)js。必须有的js:

 

[html] view plaincopy技术分享技术分享
 
  1. <script src="js/swipe.js"></script>  
  2. <script>  
  3. var slider =  
  4.   Swipe(document.getElementById(‘slider‘), {  
  5.     auto: 3000,  
  6.     continuous: true,  
  7.     callback: function(pos) {  
  8.     }  
  9.   });  
  10. </script>  

 

这个就是调用swipe了,这里面的参数有些是可有可无,根据自己的需求来选择,简要说明下swipe的接口参数(js里面是这么称呼的么?):

 

[html] view plaincopy技术分享技术分享
 
  1. startSlide Integer (default:0) - 开始滚动的位置  
  2. speed Integer (default:300) - 动画滚动的间隔(秒数)  
  3. auto Integer - 开始自动幻灯片(以毫秒为单位幻灯片之间的时间)  
  4. continuous Boolean (default:true) - 创建一个无限的循环(当滑动到所有动画结束时是否循环滑动)  
  5. disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动  
  6. stopPropagation Boolean (default:false) - 是否停止事件冒泡  
  7. callback Function - 幻灯片运行中的回调函数  
  8. transitionEnd Function - 动画运行结束的回调函数  

 

api:

 

[html] view plaincopy技术分享技术分享
 
  1. prev():上一页  
  2. next():下一页  
  3. getPos():获取当前页的索引  
  4. getNumSlides():获取所有项的个数  
  5. slide(index, duration):滑动方法  



 

然后自己要实现的代码就可以写在那些回调函数中(如callback等)

三、其他

要在移动设备上要比较好的显示出来,除了上面的主要配置外,还需要另外一些辅助:

 

[html] view plaincopy技术分享技术分享
 
  1. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">  
  2. <meta name="app-mobile-web-app-capable" content="yes">   

至于上面的含义,大家可百度(程序猿都用Google,但是我上不了,就只能是百度了)之。

 

 

好了,swipe就先介绍到此了,以下在附上我实例的源码,里面还加了一段nav。(swipe自己去下载)

由于才第一次再csdn上写这么多的文字,弱弱的问下,我看到很其他的文章里面的代码有显示行数,刚在编辑的时候,到处找设置代码行数的地方,没找着,这个不支持么?

 

 

[html] view plaincopy技术分享技术分享
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title> xx的相册 </title>  
  6. <meta name="description" content="xx的相册">  
  7. <meta name="keywords" content="xxh,album,相册">  
  8. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">  
  9. <meta name="app-mobile-web-app-capable" content="yes">   
  10. </head>  
  11. <style>  
  12. .swipe {  
  13.     overflow: hidden;  
  14.     visibility: hidden;  
  15.     position: relative;  
  16. }  
  17. .swipe-wrap {  
  18.     overflow: hidden;  
  19.     position: relative;  
  20. }  
  21. .swipe-wrap > figure {  
  22.     float: left;  
  23.     width: 100%;  
  24.     position: relative;  
  25. }  
  26. #slider {  
  27.     max-width: 650px;/* 设置最大的宽度 */  
  28.     margin: 0px auto; /* 居中对齐 */  
  29. }  
  30.   
  31. figure {  
  32.     margin: 0;/* 对齐,四周宽度都为0,在轮播的时候,以整张图片进行移动 */  
  33. }  
  34. div.swipe {  
  35.     border: 1px solid blue;  
  36. }  
  37. .page-swipe nav #position {  
  38.     text-align: center;  
  39.     list-style: none;  
  40.     margin: 0;  
  41.     padding: 0  
  42. }  
  43. .page-swipe nav #position li {  
  44.     display: inline-block;  
  45.     width: 10px;  
  46.     height: 10px;  
  47.     border-radius: 10px;  
  48.     background: #141414;  
  49.     box-shadow: inset 0 1px 3px black,0 0 1px 1px #202020;  
  50.     margin: 0 2px;  
  51.     cursor: pointer  
  52. }  
  53. .page-swipe nav #position li.on {  
  54.     box-shadow: inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5);  
  55.     background-color: #1293dc;  
  56.     background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297));  
  57.     background-image: -webkit-linear-gradient(top,#1293dc,#0f6297);  
  58.     background-image: -moz-linear-gradient(top,#1293dc,#0f6297);  
  59.     background-image: -ms-linear-gradient(top,#1293dc,#0f6297);  
  60.     background-image: -o-linear-gradient(top,#1293dc,#0f6297);  
  61.     background-image: linear-gradient(top,#1293dc,#0f6297)  
  62. }  
  63. </style>  
  64. <body class="page-swipe">  
  65. <div id="slider" class="swipe" style="visibility:visible;">  
  66.     <div class="swipe-wrap">  
  67.         <figure>  
  68.             <div class="face faceInner">  
  69.                 <img src="img/1.JPG" width="100%" height="100%" />  
  70.             </div>  
  71.         </figure>  
  72.         <figure>  
  73.             <div class="face faceInner">  
  74.                 <img src="img/2.JPG" width="100%" height="100%" />  
  75.             </div>  
  76.         </figure>  
  77.         <figure>  
  78.             <div class="face faceInner">  
  79.                 <img src="img/3.JPG" width="100%" height="100%" />  
  80.             </div>  
  81.         </figure>  
  82.     </div>  
  83. </div>  
  84.   
  85. <nav>  
  86. <ul id="position">  
  87.   <li class="on"></li>  
  88.   <li class=""></li>  
  89.   <li class=""></li>  
  90. </ul>  
  91. </nav>  
  92.   
  93. <script src="js/swipe.js"></script>  
  94. <script>  
  95. var slider =  
  96.   Swipe(document.getElementById(‘slider‘), {  
  97.     auto: 3000,  
  98.     continuous: true,  
  99.     callback: function(pos) {  
  100.         var i = bullets.length;  
  101.         while(i--){  
  102.             bullets[i].className = ‘ ‘;  
  103.         }  
  104.         bullets[pos].className = ‘on‘;  
  105.     }  
  106.   });  
  107. var bullets = document.getElementById(‘position‘).getElementsByTagName(‘li‘);  
  108. </script>  
  109. </body>  
  110. </html>  
      转自 http://blog.csdn.net/xiongxianhe/article/details/39993193

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。