滑动验证实现

滑动验证

 

• 效果示例图

• 实现原理

鼠标按下、移动、松开的之后，通过鼠标松开之后与初始位置的偏移量加上滑动块的宽度来计算滑动进度的div的宽度，在内层的滑动块始终向右浮动就行了。

鼠标移动过程中，越界问题处理

// 移动鼠标
document.onmousemove = function (e) {
    // 记录滑动的进度长度
    let objX = e.clientX - disX + btnWidth;
    // 滑动过程中，向左越界处理
    if (objX < btnWidth) {
        objX = btnWidth;
    }
    // 滑动过程中，向右越界处理
    if (objX > slideBoxWidth) {
        objX = slideBoxWidth;
    }
    // 改变滑动进度宽度
    $('#slide_xbox').width(objX + 'px');
};

鼠标松开之后，判断进度div的宽度与滑动条的总宽度进行比较（进度条是否拉满)

// 松开鼠标
document.onmouseup = function (e) {
    document.onmousemove = null;
    document.onmouseup = null;
    // 记录滑动的进度长度
    let objX = e.clientX - disX + btnWidth;
    // 进度条是否拉满
    if (objX < slideBoxWidth) {
        // 进度条未拉满，恢复到初始宽度
        $('#slide_xbox').width(btnWidth + 'px');
    } else {
        // 进度条拉满，保持宽度不变
        $('#slide_xbox').width(slideBoxWidth + 'px').html('验证通过<div id="btn"></div>');
        $('#btn').css('background-image', 'url(img/wancheng.png)');
        alert("验证成功！");
    }
};

• 其他

附demo压缩包

点击下载==》滑动验证.7z