图片认证小案例

涉及的知识点：

该案例主要是利用鼠标事件来实现的，涉及鼠标按下事件、鼠标移动事件和鼠标抬起事件

思路：

• 当鼠标在要拖动的图片上按下鼠标时，此时也就相当于开关已经打开，也就表示可以进行拖动，因此在这里需要先进行判断，是否可以拖动
•  在鼠标拖动之前要先进行判断，是否可以拖动；在过程中需要设置临界值，以防止过界
•  当鼠标弹起时，需要判断是否是第一次，如果是就关闭开关，之后进行验证成功与否。在开始验证前需要设置一个容错范围，也就是在该范围内，都算验证成功，否则就是验证失败

首先，先设置两个div分别用来存放两张图片，最内层的div利用绝对定位的方式将其定位到外层div的合适位置处

.div1 {
            position: relative;
            background-image: url('img/1.JPG');
            width: 847px;
            height: 519px;
        }
        
.div2 {
            position: absolute;
            top: 144px;
            background-image: url("img/2.png");
            width: 312px;
            height: 287px;
        }

<div class="div1">
        <div class="div2"></div>
</div>

大致如下：

 

 那么接下来就是实现逻辑部分：

        //获取元素
        const div1 = document.querySelector(".div1");
        const div2 = document.querySelector(".div2");

        //设置一个flag，用来表示不能拖动
        let flag = false;

        //设置一个flag，用来表示是否可以拖动，false表示不可拖动；true表示可以拖动
        let onlyOnce = true;

        div2.onmousedown = () => {
            //每次按下之前，都必须要判断能否拖动
            if (onlyOnce) {
                // 打开开关，允许图片跟随移动
                flag = true;
            }
        }

        //设置移动的边界
        div1.onmousemove = (eve) => {
            //判断开关是否打开，如果打开则表示能够跟随移动
            if (flag) {
                const mouseLeft = eve.clientX;

                //设置边界值
                if (mouseLeft < 156) {
                    mouseLeft = 156;
                }

                if (mouseLeft > 692) {
                    mouseLeft = 692;
                }
                div2.style.left = mouseLeft - 156 + 'px';
            }
        }

        //鼠标抬起时
        div2.onmouseup = () => {
            //每次抬起都需要判断是否是第一次
            if (onlyOnce) {
                //关闭开关
                flag = false;

                const divLeft = parseInt(div2.style.left);

                //判断左定位属性值范围在[244-304]之间就算验证成功
                if (divLeft >= 244 && divLeft <= 304) {
                    alert('验证成功');
                } else {
                    alert("验证失败");
                }

                //验证后则不可再拖动图片
                onlyOnce = false;
            }
        }