当前位置 : 主页 > 手机教程 > 手机资讯 >

原生js实现简单滑动解锁功能 js实现滑动拼图解锁

来源:互联网 收集:自由互联 发布时间:2023-01-20
本文实例为大家分享了js实现简单滑动解锁功能以及滑动拼图解锁的具体代码,供大家参考,具体内容如下 简单实现滑动解锁,效果图是这样的 !DOCTYPE htmlhtml lang="en"head    meta charset=

本文实例为大家分享了js实现简单滑动解锁功能以及滑动拼图解锁的具体代码,供大家参考,具体内容如下

简单实现滑动解锁,效果图是这样的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动解锁</title>
    <style>
        .div1 {
            width: 200px;
            height: 30px;
            border: 1px solid #cccccc;
            user-select: none;
            position: relative;
            margin: 0 auto;
            margin-top: 300px;
        }

        .div2 {
            width: 100%;
            height: 30px;


        }

        .div3 {
            position: absolute;
            top: 0;
            left: 0;
            width: 36px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #fff;
            cursor: pointer;
            font-family: "宋体";
            z-index: 10;
            font-weight: bold;
            color: #929292;
            /* cursor: move; */
        }

        .div4 {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            line-height: 30px;
            text-align: center;
            z-index: -1;
            background: #ccc;
        }
    </style>
</head>

<body>
    <!-- 大盒子 -->
    <div class="div1" id='div1'>
        <div class="div2" id='div2'></div>
        <span class="div3" id='div3'>>></span>
        <div class="div4" id='div4'>滑动解锁</div>
    </div>
    <script>
    //     var a =1,b='1'
    //     console.log(a+b,a-b,a++,b++)
        
    //     const str = 'console.log(1)';
    //     // replaceAll("\\(.*\\)","");
    // const newStr=str.replace[/console\.log/, 'return ']
    // console.log(newStr)
 
        var div1 = document.getElementById('div1');
        var div3 = document.getElementById('div3');
        var div4 = document.getElementById('div4');
        var left;
        var px = div1.offsetWidth - div3.offsetWidth
        div3.onmousedown = function (event) {

            var event = window.event || ev;
            left = event.clientX - div3.offsetLeft;//鼠标按下时的位置
            console.log(event)
            console.log(left)

            document.onmousemove = function (event) {//鼠标移动
                var event = window.event || ev;
                lefta = event.clientX - left;//鼠标移动的距离
                console.log(px, lefta);
                if (lefta < 0) {
                    lefta = 0;
                } else if (px < lefta) {
                    lefta = px - 2;
                }
                div3.style.left = lefta + 'px';
            }
            document.onmouseup = function (event) {//鼠标抬起
                var event = window.event || ev;
                document.onmousemove = null;
                document.onmouseup = null;

                lefta = event.clientX - left;
                if (lefta < 0) {
                    lefta = 0;
                    span.innerHTML = '滑动解锁';

                } else if (px < lefta) {
                    lefta = px - 2;
                    div4.innerHTML = '解锁成功';
                    div3.innerHTML = '√';
                    div3.onmousedown = null;
                    alert('成功')
                } else {
                    lefta = 0;
                }
                div3.style.left = lefta + 'px';

            }

        }
    </script>
</body>

</html>

由于拼图解锁我没做过,做了个大概的样子,效果图

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动解锁</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .conter{
            width: 202px;
            border: 1px solid #ccc;
            margin: 0 auto;
            margin-top: 300px;
        }
        .box {
            width: 202px;
            height: 130px;
            background: #ff00ff;
            position: relative;
        }
        .box::before {
            content: '';
            position: absolute;
            bottom:  50px;
            right: 30px;
            width: 30px;
            height: 30px;
            background: #fff;
            z-index: 99;
        }

        .div1 {
            position: absolute;
            bottom: 0;
            width: 200px;
            height: 30px;
            border: 1px solid #cccccc;
            user-select: none;
            position: relative;

        }

        .div2 {
            width: 100%;
            height: 30px;


        }

        .div3 {
            position: absolute;
            top: 0;
            left: 0;
            width: 36px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #fff;
            cursor: pointer;
            font-family: "宋体";
            z-index: 10;
            font-weight: bold;
            color: #929292;
            z-index: 1000;
        }
        .div3::before{
            content: '';
            position: absolute;
            top: -81px;
            left: 3px;
            width: 30px;
            height: 30px;
            background: #000;
        }

        .div4 {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            line-height: 30px;
            text-align: center;
            z-index: -1;
            background: #ccc;
        }
    </style>
</head>

<body>
    <!-- 大盒子 -->
    <div class="conter">
        <!-- 可以放图片  计算位置 -->
        <div class="box"></div>
        <div class="div1" id='div1'>
            <div class="div2" id='div2'></div>
            <!-- 对应缺口位置 拖动到相应位置既符合 -->
            <span class="div3" id='div3'>>></span>
            <div class="div4" id='div4'>滑动解锁</div>
        </div>
    </div>

    <script>
        var div1 = document.getElementById('div1');
        var div3 = document.getElementById('div3');
        var div4 = document.getElementById('div4');
        var left;
        var px = div1.offsetWidth - div3.offsetWidth
        div3.onmousedown = function (event) {

            var event = window.event || ev;
            left = event.clientX - div3.offsetLeft;//鼠标按下时的位置
            document.onmousemove = function (event) {//鼠标移动
                var event = window.event || ev;
                lefta = event.clientX - left;//鼠标移动的距离
                // console.log(lefta);
                if (lefta < 0) {
                    lefta = 0;
                } else if (px < lefta) {
                    lefta = px;
                }
                div3.style.left = lefta + 'px';
            }
            document.onmouseup = function (event) {//鼠标抬起
                var event = window.event || ev;
                document.onmousemove = null;
                document.onmouseup = null;

                lefta = event.clientX - left;
                console.log(lefta)
                if (lefta < 0) {
                    lefta = 0;
                    div4.innerHTML = '滑动解锁';
                        // 是否符合缺口位置
                } else if (lefta > '134' &&  lefta <'142') {

                    div4.innerHTML = '解锁成功';
                    div3.innerHTML = '√';
                    div3.onmousedown = null;
                    alert('成功')
                } else {
              
                    alert('错误,请重试')
                        lefta = 0;
           
                   
                }
                div3.style.left = lefta + 'px';

            }

        }
    </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自由互联。

上一篇:JavaScript最完整的深浅拷贝实现方式详解
下一篇:没有了
网友评论