最近项目中有这样一个需求，研究了两种写法一个原生，一个使用框架

原生写法：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.             <link rel="stylesheet" href="css/huapin.css" />
  8.     <!--        <link rel="stylesheet" href="css/swiper.min.css" />-->
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  10.     </head>
  11.  
  12.     <body>
  13.         <div class="page2">
  14.             <div class="silder_bg">
  15.                 <span>滑动滑动</span>
  16.                 <!--滑动的白点-->
  17.                 <img src="data:images/1closeLight.png" class="p2_bg1" /> //充当一个提示过度的效果
  18.                 <!--手滑动关闭图-->
  19.                 <img src="data:images/2closeBar.png" id='silder' class="p2_bg2"/>
  20.             </div>
  21.         </div>
  22.         <div class="page3">
  23.  
  24.         </div>
  25.     </body>
  26.     <script src="js/zepto.js"></script>
  27.     <script>
  28.         document.getElementById('silder').addEventListener('touchmove',function(event){ //使用touchmove监听滑动
  29.             event.preventDefault();
  30.             var el = event.target;
  31.             var touch = event.touches[0];
  32.             var  curX = touch.pageX - this.offsetLeft - 73;
  33.  
  34.             if(curX <= 0) return;
  35.             if(curX > 224){
                    //符合条件需要执行的事件
  36.                 $(".page2").hide();
  37.                 $(".page3").show();
  38.                 setTimeout(function(){
  39.                     p2show()
  40.                 },2000);
  41.             }
  42.             el.style.webkitTransform = 'translateX(' + curX + 'px)';//使其在x轴位移
  43.         },false);
  44.  
  45.         document.getElementById('silder').addEventListener('touchend', function(event) {  //使用touchend监听滑动结束
  46.             this.style.webkitTransition = '-webkit-transform 0.3s ease-in';
  47.             this.addEventListener( 'webkitTransitionEnd', function( event ) { this.style.webkitTransition = 'none'; }, false );
  48.             this.style.webkitTransform = 'translateX(0px)';
  49.         }, false);
  50.     </script>
  51.  
  52. </html>
  1. huapin.css:
  1. *{
  2.     border:;
  3.     margin:;
  4.     overflow: hidden;
  5. }
  6. html,body{
  7.     width: 100%;
  8.     height: 100%;
  9. }
  10. .page2{
  11.  
  12.     position: fixed;
  13.     top:;
  14.     left:;
  15.     width: 100%;
  16.     height: 100%;
  17. }
  18.  
  19. .page2>.bg2{
  20.     position: fixed;
  21.     top:;
  22.     left:;
  23.     height: 100vh;
  24.     width: 100vw;
  25.     background-color: #000000;
  26.     opacity: 0.6;
  27.  
  28. }
  29. .silder_bg{
  30.     width: 78vw;
  31.     height: 10vh;
  32.     position: absolute;
  33.     top:5vh;
  34.     left:;
  35.     right:;
  36.     margin: 0 auto;
  37.     z-index:;
  38.     background-color: #F2F2F2;
  39.     border-radius: 6vh;
  40.  
  41. }
  42.  
  43. .p2_bg1{
  44.     width: 10vh;
  45.     height: 10vh;
  46.     position: absolute;
  47.     top:;
  48.     left: 20vw;
  49.     right:;
  50.     z-index:;
  51.     animation: light 3s linear infinite;
  52.     -webkit-animation:light 3s linear infinite;
  53. }
  54. /*滑动css3动画*/
  55. @keyframes light{
  56.     from{left:12vw;}
  57.     to{left:60vw ;}
  58. }
  59. @-webkit-keyframes light{
  60.     from{left:10vw;opacity: 0.4;}
  61.     to{left:55vw ;opacity: 0.4;}
  62. }
  63.  
  64. .p2_bg2{
  65.     width: 10vh;
  66.     height: 10vh;
  67.     position: absolute;
  68.     top:;
  69.     left:;
  70.     right:;
  71.     z-index:;
  72.  
  73. }
  74. .silder_bg span{
  75.     width: 78vw;
  76.     height: 5vh;
  77.     position: absolute;
  78.     top:3vh;
  79.     left: 4vw;
  80.     right:;
  81.  
  82.     z-index:;
  83.     font-family: "微软雅黑";
  84.     font-size:14px ;
  85.     text-align: center;
  86. }

以上是原生的写法，还可以使用jq的拖拽（draggable）这个方法

下面说下使用swiper的写法

  1. <!doctype html>
  2. <html lang="en">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>Swiper Playground</title>
  7.         <link rel="stylesheet" href="css/swiper.min.css">
  8.         <link rel="stylesheet" href="css/huapin.css" />
  9.         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  10.         <style>
  11.             html,
  12.             body {
  13.                 position: relative;
  14.                 height: 100%;
  15.             }
  16.  
  17.             body {
  18.                 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  19.                 font-size: 14px;
  20.                 color: #000;
  21.                 margin: 0;
  22.                 padding: 0;
  23.             }
  24.  
  25.             .swiper-container {
  26.                 width: 100%;
  27.                 height: 100%;
  28.                 z-index: 300;
  29.             }
  30.  
  31.             img {
  32.                 width: 100%;
  33.             }
  34.  
  35.             .swiper-slide {
  36.                 z-index: 300;
  37.             }
  38.  
  39.             .p2_bg {
  40.                 width: 10vh;
  41.                 height: 10vh;
  42.                 z-index: 300;
  43.             }
  44.         </style>
  45.     </head>
  46.  
  47.     <body>
        //html布局同上面，只是加了个swiper-container容器
  48.         <div class="silder_bg">
  49.             <span>滑动滑动</span>
  50.             <!--滑动的白点-->
  51.             <img src="data:images/1closeLight.png" class="p2_bg1" />
  52.             <!--手滑动关闭图-->
  53.             <div class="swiper-container">
  54.                 <div class="swiper-wrapper">
  55.                     <div class="swiper-slide">  //去掉swiper.min.css对swiper-slide的默认样式
  56.                         <img src="data:images/2closeBar.png" class="p2_bg" />
  57.                     </div>
  58.  
  59.                 </div>
  60.             </div>
  61.         </div>
  62.         <script src="js/zpto.js"></script>
  63.         <script src="js/swiper.min.js"></script>
  64.         <script>
             简单思路：滑动swiper时监听滑动距离判断条件即可
  65.             var swiper = new Swiper('.swiper-container', {
  66.                 slidesPerView: 'auto',
  67.                 freeMode: true,
  68.                 on: {
  69.                     touchMove: function() {
  70.                         //     alert(swiper.translate)
  71.                         if(swiper.translate > 130) {
  72.                             $(".silder_bg").fadeOut(500)
  73.                         }
  74.                     },
  75.                 },
  76.             });
  77.         </script>
  78.     </body>
  79.  
  80. </html>

以上两种写法，原生的实现起来互动的更加快速，swiper滑动的相对有弹性一点，所要监听的距离更短，也可实现效果

swiper 实现滑动解锁的更多相关文章

  1. hiho_1054_滑动解锁

    题目大意 智能手机九点屏幕滑动解锁,如果给出某些连接线段,求出经过所有给出线段的合法的滑动解锁手势的总数.题目链接: 滑动解锁 题目分析 首先,尝试求解没有给定线段情况下,所有合法的路径的总数.可以使 ...

  2. hihocoder#1054 : 滑动解锁（深度优先搜索）

    描述 滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图案.方向上 ...

  3. Swift: 打造滑动解锁文字动画

    原文:Swift: 打造滑动解锁文字动画 最近木事,找出来玩了玩facebook的paper.到处都是那个"slide to unlock your phone"的效果啊.忽闪忽闪 ...

  4. Selenium模拟JQuery滑动解锁

    滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路. 首先先看个例子. https://www.helloweba.com/demo/2017 ...

  5. hihocoder 1054 滑动解锁 dfs

    详细分析见滑动解锁分析 AC代码 #include <cstdio> #include <cmath> #include <cctype> #include < ...

  6. C语言 · 滑动解锁

    题目:滑动解锁 滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图 ...

  7. angular ng-repeat元素swiper无法滑动问题解决

    前言 angular中ng-repeat元素swiper无法滑动,angular与swiper冲突. 1.问题 在项目中,我需要利用ng-repeat循环li,比如一个nav导航条,在加入swiper ...

  8. jq实现简单的滑动解锁效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. APP九宫格滑动解锁的处理

    写手机自动化测试脚本关于APP九宫格滑动解锁方面采用了appium API 之 TouchAction 操作. 先是用uiautomatorviewer.bat查询APP元素坐标: 手工计算九宫格每个 ...

随机推荐

  1. Docker的iptables规则在iptables重启后丢失

    前因后果 1.在跳板机上使用ansible命令测试机器B时,报错如下,于是就怀疑是网络防火墙的问题 10.10.0.86 | FAILED >> { "failed": ...

  2. java方式实现归并排序

    一.基本思想 归并排序是建立在归并操作上的一种排序算法,该算法是采用分治法的一个典型应用.具体操作如下:所谓的分治就是分而治之,以一分为二的原则,先把序列平均分解成二个左右子序列,然后递归左右二个子序 ...

  3. 02 . Redis哨兵

    Redis高可用概述 ​ 在 Web 服务器中,高可用 是指服务器可以 正常访问 的时间,衡量的标准是在 多长时间 内可以提供正常服务(99.9%.99.99%.99.999% 等等).在 Redis ...

  4. GNS3配置问题（持续更新）

    GNS3配置问题 1.关于All in One的GNS3提示"判断dynamips版本失败"的解决办法 当我们找到GNS3根目录里的dynamips.exe,执行会报错告诉我们缺少 ...

  5. java 单列集合总结

    Collection 接口 add() remove() contains() clear(); size(); 迭代器遍历(普通迭代器,不能再遍历过程中修改集合的长度) List接口 单列集合 有序 ...

  6. Java实现 LeetCode 234 回文链表

    234. 回文链表 请判断一个链表是否为回文链表. 示例 1: 输入: 1->2 输出: false 示例 2: 输入: 1->2->2->1 输出: true 进阶: 你能否 ...

  7. Java实现 LeetCode 121 买卖股票的最佳时机

    121. 买卖股票的最佳时机 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 如果你最多只允许完成一笔交易(即买入和卖出一支股票),设计一个算法来计算你所能获取的最大利润. 注意你不 ...

  8. 记一次mysql修复错误数据问题

    问题描述 之前做的一个服务端配合硬件端的项目,今天突然在微信上跟我讲在管理后台订单列表里的设备编号看不见后3位数字. 原因查找 看了下数据库表发现原因是因为订单表的设备编号长度限制了16位(开发时跟硬 ...

  9. 温故知新-多线程-深入刨析CAS

    文章目录 摘要 CAS是什么? CAS是如何实现的? CAS存在的问题? 你的鼓励也是我创作的动力 Posted by 微博@Yangsc_o 原创文章,版权声明:自由转载-非商用-非衍生-保持署名 ...

  10. Andorid中写文件后在电脑上看不到的解决办法

    每次通过输出流往SD卡写入文件,连接上电脑,用MTP的方式模拟一个移动磁盘,打开磁盘却没有这样一个文件,而通过adb的方式查看就有,造成这个现象的原因是,每次写入之后,MTP的数据库并没有更新,因为更 ...