登录页滑块验证图

一坤年的回忆2024-08-07 18:40
效果图

javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="slider-container" style="background: url(./1png.png) 100% 100%;">  
        <div class="slider-block" id="slider"></div>  
    <p class="status">请拖动滑块完成验证</p>  
        <button class="submit-btn" disabled>提交</button>  
    </div>
</body>

<script>
let slider = document.getElementById('slider');  
    let isDragging = false;  
    let startX, currentX;  
      
    slider.addEventListener('mousedown', function(e) {  
        isDragging = true;  
        startX = e.clientX - slider.offsetLeft;  
    });  
      
    document.addEventListener('mousemove', function(e) {  
        if (isDragging) {  
            currentX = e.clientX - startX;  
            let maxLeft = slider.parentElement.offsetWidth - slider.offsetWidth;  
            if (currentX < 0) currentX = 0;  
            if (currentX > maxLeft) currentX = maxLeft;  
            slider.style.left = currentX + 'px';  
      
            // 这里可以添加验证逻辑，比如检查滑块是否到达特定位置  
            if (currentX >= maxLeft - 50) { // 假设缺口在右侧50px处  
                document.querySelector('.submit-btn').disabled = false;  
            } else {  
                document.querySelector('.submit-btn').disabled = true;  
            }  
        }  
    });  
      
    document.addEventListener('mouseup', function() {  
        isDragging = false;  
    });  
      
    // 提交按钮点击事件（示例）  
    document.querySelector('.submit-btn').addEventListener('click', function() {  
        // 提交表单或进行其他操作  
        alert('验证成功，提交表单！');  
    });</script>

<style>
.slider-container {  
    position: relative;  
    width: 300px; /* 根据实际图片调整 */  
    height: 200px; /* 根据实际图片调整 */  
    overflow: hidden;  
}  
  
.bg-image {  
    width: 100%;  
    height: 100%;  
    display: block;  
}  
  
.slider-block {  
    position: absolute;  
    width: 50px; /* 滑块宽度 */  
    height: 100%;  
    background-color: #007bff; /* 滑块颜色 */  
    cursor: pointer;  
    user-select: none; /* 防止文本选择 */  
    transition: left 0.3s ease; /* 平滑移动效果 */  
}  
  
.submit-btn {  
    margin-top: 10px;  
}</style>
</html>