zoukankan      html  css  js  c++  java

  • 移动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在CODE上查看代码片派生到我的代码片
     
    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在CODE上查看代码片派生到我的代码片
     
    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.      100%;  
    14.     position: relative;  
    15. }  
    16. #slider {  
    17.     max- 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在CODE上查看代码片派生到我的代码片
     
    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在CODE上查看代码片派生到我的代码片
     
    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在CODE上查看代码片派生到我的代码片
     
    1. prev()：上一页  
    2. next()：下一页  
    3. getPos()：获取当前页的索引  
    4. getNumSlides()：获取所有项的个数  
    5. slide(index, duration)：滑动方法  



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

    三、其他

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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在CODE上查看代码片派生到我的代码片
     
    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.      100%;  
    24.     position: relative;  
    25. }  
    26. #slider {  
    27.     max- 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.      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
  • 相关阅读:
    Hive-基本操作
    Hive-安装
    Hive-概述
    游荡二十几天的感想
    js html css
    C#笔试总结
    ubuntu16.04 下 C# mono开发环境搭建
    scoket、TCP、UDP、WebService选型
    虚拟机安装Windows系统，再安装orcale
    Rosetta Stone 不在C盘安装步骤
  • 原文地址：https://www.cnblogs.com/zhongfufen/p/4465550.html
Copyright © 2011-2022 走看看