纯js实现图片滑块验证

需求：js实现滑块验证
思路：设置position:absolute,通过left值控制滑动

再来说几个js事件:
onmousedown
事件会在鼠标按键被按下时发生
onmousemove
事件会在鼠标指针移动时发生
onmouseup
事件会在鼠标松开时发生

实现：

//完成图片及滑块的摆放
<div class='box'>
    <img src="./timg.jpg" alt="" class='img'>
    <img src="./nose.png" alt="" class='inner'>
</div>
<div class="drag">
    <div class="bg"></div>
    <div class="text" onselectstart="return false;">请拖动滑块解锁</div>
    <div class="btn">&gt;&gt;</div>
</div>

及样式：

        .box {
            width: 311px;
            height:155px;
            margin:0 auto;
            position:relative;
        }
        .inner {
            position:absolute;
            left:0;
        }
        .drag{
            width: 311px;
            height: 40px;
            line-height: 40px;
            background-color: #e8e8e8;
            position: relative;
            margin:0 auto;
        }
        .bg{
            width:40px;
            height: 100%;
            position: absolute;
            background-color: #75CDF9;
        }
        .text{
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
            user-select: none;
        }
        .btn{
            width:40px;
            height: 38px;
            position: absolute;
            border:1px solid #ccc;
            cursor: move;
            font-family: "宋体";
            text-align: center;
            background-color: #fff;
            user-select: none;
            color:#666;
        }

写完后是这样滴：

接下来写事件：
首先获取滑动键被点了

btn.onmousedown = function(e){
    var e = e || window.event;
    //鼠标点的位置
    var downX = e.clientX;
}

监听移动事件（写在点击方法里面，这里为了方便介绍，可下载源码）：

document.onmousemove = function(e){
    var e = e || window.event;
    //获取鼠标移动后的水平位置
    var moveX = e.clientX;
    //获取移动了多少
    offsetX = moveX - downX;
    //防止越界
    if( offsetX > distance){
        offsetX = distance;//如果滑过了终点，就将它停留在终点位置
    }else if( offsetX < 0){
        offsetX = 0;//如果滑到了起点的左侧，就将它重置为起点位置
    }
    //根据移动距离让按钮，小图片及背景色动起来
    按钮.style.left = offsetX + "px";
    背景.style.width = offsetX + "px";
    小图.style.left=offsetX + "px";
}

然后通过移动距离和需要的距离做对比，获取状态。

if( offsetX == "目标"){
    //1.设置滑动成功后的样式
    text.innerHTML = "";
    text.style.color = "#fff";
    btn.innerHTML = "√";
    btn.style.color = "green";
    bg.style.backgroundColor = "lightgreen";
    success=true;
    //2.成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）
    btn.onmousedown = null;
    document.onmousemove = null;
    //3.成功解锁后的回调函数
    setTimeout(function(){
        alert('解锁成功！');
    },100);
}

当鼠标松开时：

       document.onmouseup = function(e){
        //如果鼠标的水平移动距离 = 滑动成功的宽度
        if( success){
           return;
        }else{
            //反之，则将滑块复位（设置了1s的属性过渡效果）
            btn.style.left = 0;
            bg.style.width = 0;
            inner.style.left=0;
            btn.style.transition = "left 1s ease";
            inner.style.transition = "left 1s ease";
            bg.style.transition = "width 1s ease";
        }
        //只要鼠标松开了，说明此时不需要拖动滑块了，那么就清除鼠标移动和松开事件。
        document.onmousemove = null;
        document.onmouseup = null;
    }

大体实现思路就这些啦！
源码地址：https://github.com/myweiwei/S...
将不断更新完善，期待您的批评指正！