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

原生写法：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

            <link rel="stylesheet" href="css/huapin.css" />

    <!--        <link rel="stylesheet" href="css/swiper.min.css" />-->

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    </head>

    <body>

        <div class="page2">

            <div class="silder_bg">

                <span>滑动滑动</span>

                <!--滑动的白点-->

                <img src="data:images/1closeLight.png" class="p2_bg1" /> //充当一个提示过度的效果

                <!--手滑动关闭图-->

                <img src="data:images/2closeBar.png" id='silder' class="p2_bg2"/>

            </div>

        </div>

        <div class="page3">

        </div>

    </body>

    <script src="js/zepto.js"></script>

    <script>

        document.getElementById('silder').addEventListener('touchmove',function(event){ //使用touchmove监听滑动

            event.preventDefault();

            var el = event.target;

            var touch = event.touches[0];

            var  curX = touch.pageX - this.offsetLeft - 73;

            if(curX <= 0) return;

            if(curX > 224){
                //符合条件需要执行的事件

                $(".page2").hide();

                $(".page3").show();

                setTimeout(function(){

                    p2show()

                },2000);

            }

            el.style.webkitTransform = 'translateX(' + curX + 'px)';//使其在x轴位移

        },false);

        document.getElementById('silder').addEventListener('touchend', function(event) {  //使用touchend监听滑动结束

            this.style.webkitTransition = '-webkit-transform 0.3s ease-in';

            this.addEventListener( 'webkitTransitionEnd', function( event ) { this.style.webkitTransition = 'none'; }, false );

            this.style.webkitTransform = 'translateX(0px)';

        }, false);

    </script>

</html>
huapin.css:
*{

    border:;

    margin:;

    overflow: hidden;

}

html,body{

    width: 100%;

    height: 100%;

}

.page2{

    position: fixed;

    top:;

    left:;

    width: 100%;

    height: 100%;

}

.page2>.bg2{

    position: fixed;

    top:;

    left:;

    height: 100vh;

    width: 100vw;

    background-color: #000000;

    opacity: 0.6;

}

.silder_bg{

    width: 78vw;

    height: 10vh;

    position: absolute;

    top:5vh;

    left:;

    right:;

    margin: 0 auto;

    z-index:;

    background-color: #F2F2F2;

    border-radius: 6vh;

}

.p2_bg1{

    width: 10vh;

    height: 10vh;

    position: absolute;

    top:;

    left: 20vw;

    right:;

    z-index:;

    animation: light 3s linear infinite;

    -webkit-animation:light 3s linear infinite;

}

/*滑动css3动画*/

@keyframes light{

    from{left:12vw;}

    to{left:60vw ;}

}

@-webkit-keyframes light{

    from{left:10vw;opacity: 0.4;}

    to{left:55vw ;opacity: 0.4;}

}

.p2_bg2{

    width: 10vh;

    height: 10vh;

    position: absolute;

    top:;

    left:;

    right:;

    z-index:;

}

.silder_bg span{

    width: 78vw;

    height: 5vh;

    position: absolute;

    top:3vh;

    left: 4vw;

    right:;

    z-index:;

    font-family: "微软雅黑";

    font-size:14px ;

    text-align: center;

}

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

下面说下使用swiper的写法

<!doctype html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Swiper Playground</title>

        <link rel="stylesheet" href="css/swiper.min.css">

        <link rel="stylesheet" href="css/huapin.css" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

        <style>

            html,

            body {

                position: relative;

                height: 100%;

            }

            body {

                font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

                font-size: 14px;

                color: #000;

                margin: 0;

                padding: 0;

            }

            .swiper-container {

                width: 100%;

                height: 100%;

                z-index: 300;

            }

            img {

                width: 100%;

            }

            .swiper-slide {

                z-index: 300;

            }

            .p2_bg {

                width: 10vh;

                height: 10vh;

                z-index: 300;

            }

        </style>

    </head>

    <body>
    //html布局同上面，只是加了个swiper-container容器

        <div class="silder_bg">

            <span>滑动滑动</span>

            <!--滑动的白点-->

            <img src="data:images/1closeLight.png" class="p2_bg1" />

            <!--手滑动关闭图-->

            <div class="swiper-container">

                <div class="swiper-wrapper">

                    <div class="swiper-slide">  //去掉swiper.min.css对swiper-slide的默认样式

                        <img src="data:images/2closeBar.png" class="p2_bg" />

                    </div>

                </div>

            </div>

        </div>

        <script src="js/zpto.js"></script>

        <script src="js/swiper.min.js"></script>

        <script>
         简单思路：滑动swiper时监听滑动距离判断条件即可

            var swiper = new Swiper('.swiper-container', {

                slidesPerView: 'auto',

                freeMode: true,

                on: {

                    touchMove: function() {

                        //     alert(swiper.translate)

                        if(swiper.translate > 130) {

                            $(".silder_bg").fadeOut(500)

                        }

                    },

                },

            });

        </script>

    </body>

</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. Android调试非常有用的命令集1_adb&aapt&git&repo&scp&while

    Linux部分场景非常有用的命令集_1_持续更新 这里面也包含了对于开发调试有用的命令,也可以看看. 这里不做详细说明或截图,仅作为记录和简单说明.注:可能只针对某一命令部分功能,不包含整个功能,若要 ...

  2. 这些Java8官方挖过的坑，你踩过几个？

    导读:系统启动异常日志竟然被JDK吞噬无法定位?同样的加密方法,竟然出现部分数据解密失败?往List里面添加数据竟然提示不支持?日期明明间隔1年却输出1天,难不成这是天上人间?1582年神秘消失的10 ...

  3. Java实现 LeetCode 664 奇怪的打印机（DFS）

    664. 奇怪的打印机 有台奇怪的打印机有以下两个特殊要求: 打印机每次只能打印同一个字符序列. 每次可以在任意起始和结束位置打印新字符,并且会覆盖掉原来已有的字符. 给定一个只包含小写英文字母的字符 ...

  4. Java实现 LeetCode 495 提莫攻击

    495. 提莫攻击 在<英雄联盟>的世界中,有一个叫 "提莫" 的英雄,他的攻击可以让敌方英雄艾希(编者注:寒冰射手)进入中毒状态.现在,给出提莫对艾希的攻击时间序列和 ...

  5. Java实现 LeetCode 476 数字的补数

    476. 数字的补数 给定一个正整数,输出它的补数.补数是对该数的二进制表示取反. 示例 1: 输入: 5 输出: 2 解释: 5 的二进制表示为 101(没有前导零位),其补数为 010.所以你需要 ...

  6. Java实现 LeetCode 160 相交链表

    160. 相交链表 编写一个程序,找到两个单链表相交的起始节点. 如下面的两个链表: 在节点 c1 开始相交. 示例 1: 输入:intersectVal = 8, listA = [4,1,8,4, ...

  7. Java实现 蓝桥杯VIP 算法提高 分分钟的碎碎念

    算法提高 分分钟的碎碎念 时间限制:1.0s 内存限制:256.0MB 问题描述 以前有个孩子,他分分钟都在碎碎念.不过,他的念头之间是有因果关系的.他会在本子里记录每一个念头,并用箭头画出这个念头的 ...

  8. Java实现 LeetCode 124 二叉树中的最大路径和

    124. 二叉树中的最大路径和 给定一个非空二叉树,返回其最大路径和. 本题中,路径被定义为一条从树中任意节点出发,达到任意节点的序列.该路径至少包含一个节点,且不一定经过根节点. 示例 1: 输入: ...

  9. python IDE pycharm的安装与使用

    Python开发最牛逼的IDE——pycharm (其实其它的工具,例如eclipse也可以写,只不过比较麻烦,需要安装很多的插件,所以说pycharm是最牛逼的) pycharm,下载专业版的,不要 ...

  10. 还在用SimpleDateFormat格式化时间?小心经理锤你

    还在用SimpleDateFormat格式化时间?小心经理锤你 场景 本来开开心心的周末时光,线上突然就疯狂报错,以为程序炸了,截停日志,发现是就是类似下述一段错误 java.lang.NumberF ...