效果图
<!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>
