项目8 滑块验证码

张华最近想参加创新创业大赛，需要在网站中注册，注册完后重新登录。页面中有滑块验证码效果，如图8-1所示。他想学着实现一下，可是发现有关鼠标的操作自己并没有学。

根据项目要求，实现滑块验证码效果，分为2步。

（1）滑块和拼图移动

滑块、拼图和鼠标的位置是一致的，滑块的移动过程触发mousedown和mousemove事件，接下来设置它们的移动距离及移动范围。

（2）滑块和拼图停止移动

滑块和拼图停止移动触发mouseup事件。

页面框架页面整体分拼图和滑块两部分，具体如下。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑块验证</title>
    <link rel="stylesheet" href="js8.css">
</head>
<body>
    <h1 align="center">模拟滑块验证码效果</h1>
    <div class="drag">
        <div class="image">
            <img src="img/5-1.png" alt="">
        </div>
        <div class="box">
            <i></i>
            <p class="text" unselectable="on" onselectstart="return false;"
            style="-moz-user-select: none;">
                请向右滑动滑块</p>
            <div class="bg"></div>
        </div>
    </div>
    <script src="js8.js"></script>
</body>
</html>

CSS样式使用CSS设置拼图和滑块的初始位置。


*{
    padding:0;
    margin:0;
}
h1{
    margin: 20px;
}
.drag{
    margin: 20px auto;
    width: 400px;
    height: 300px;
}
.drag .image{
    position: relative;
    width: 400px;
    height: 250px;
    background-image: url(img/5-2.png);
}
.image img{
    position: absolute;
    left: 0px;
    top:76px;
}
.drag .box{
    position: relative;
    width: 400px;
    height: 40px;
    line-height: 40px;
    background-color: #ccc;
}
.box i{
    position: absolute;
    width: 26px;
    height: 38px;
    border: 1px solid #666;
    line-height: 40px;
    background: #fff;
    z-index: 5;
    cursor: move;
}
.box .text{
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 2;
}
.box .bg{
    position: absolute;
    height: 100%;
    background: #0d5dfc;
    z-index: 1;
}

脚本代码使用JavaScript分别为mousedown事件和mouseup事件编写事件驱动程序。


window.onload = function(){
    var img = document.querySelector("img");
    var slider = document.querySelector("i");
    var box = document.querySelector(".box");
    var txt = document.querySelector(".text");
    var bg = document.querySelector(".bg");
    var flag = false;

    slider.onmousedown = function(e){
        var  startX  = e.clientX;
        slider.onmousemove = function(e){
            var moveX = e.clientX - startX;
            console.log(movex);
            console.log(startx);

            this.style.left = img.style.left = bg.style.width = `${moveX}px`;
            if(moveX<=0) moveX<=0;
            if(moveX >= 142){
                flag = true;
                moveX = 142;
                txt.innerHTML = "验证成功！";
                txt.style.color = "#fff";
                slider.onmousemove = null;
                slider.onmousedown = null;
            }
        }
    }
    slider.onmouseup = function(){
        slider.onpointermove = null;
        if(flag) return;
        this.style.left = img.style.left = bg.style.width = 0;
    }
}