在这篇文章中我们来了解一下“如何用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>

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue中push报错的问题如何解决呢？

  目录vue当前页push当前页无效vue push报错TypeError: Cannot read property ‘push‘ of undefined解决方法vue当前页push当前页无效当在当前页面中push页面跳转当前页，只是push的参数不同时，只能用字符串拼接，parames和query都不会起作用。不知

• JavaScript类型检测方法是什么，具体怎样做

  JavaScript是web前端广泛应用的语言之一，在网页应用制作、脚本制作、小程序等诸多领域具有不可替代的的地位。笔者学习了一端时间的前端，颇感JS知识点的繁碎，故将学习到的一些知识、思考和感悟记录下来。

• 用原生JS怎样实现简易的购物车全选和删除操作

  这篇文章主要为大家详细介绍了原生JavaScript实现购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• TypeScript接口继承要点有哪些，怎样应用

  本文主要介绍了TypeScript 接口继承的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• vue中如何使用localStorage实现时间格式化

  案例数据使用localStorage持久性存储 全局过滤器实现时间格式化代码部分!DOCTYPE htmlhtml lang=zh    head        meta charset=UTF-8        meta name=viewport content=width=device-width, initia