写一个简单的前端滑动验证
时间: 2024-01-05 21:47:11 浏览: 21
好的,可以使用滑块的方式实现一个简单的前端滑动验证。下面是一个示例代码:
HTML:
```html
<div class="slider-container">
<div class="slider">
<div class="slider-thumb"></div>
</div>
<span class="slider-label">请拖动滑块完成验证</span>
</div>
```
CSS:
```css
.slider-container {
position: relative;
width: 300px;
height: 50px;
margin: 20px auto;
background-color: #f0f0f0;
border-radius: 25px;
overflow: hidden;
}
.slider {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #2196f3;
transition: all 0.3s;
}
.slider-thumb {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #ffffff;
border-radius: 25px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: all 0.3s;
}
.slider-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
color: #666;
}
```
JavaScript:
```js
const sliderContainer = document.querySelector('.slider-container');
const slider = document.querySelector('.slider');
const thumb = document.querySelector('.slider-thumb');
let isDragging = false;
let startPosition = 0;
let currentX = 0;
let offset = 0;
thumb.addEventListener('mousedown', startDragging);
thumb.addEventListener('touchstart', startDragging);
function startDragging(e) {
e.preventDefault();
if (e.type === 'touchstart') {
startPosition = e.touches[0].clientX;
} else {
startPosition = e.clientX;
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDragging);
}
isDragging = true;
}
function drag(e) {
if (isDragging) {
if (e.type === 'touchmove') {
currentX = e.touches[0].clientX - startPosition;
} else {
currentX = e.clientX - startPosition;
}
offset = currentX / sliderContainer.offsetWidth;
if (offset < 0) {
offset = 0;
}
if (offset > 1) {
offset = 1;
}
thumb.style.transform = `translateX(${offset * 100}%)`;
slider.style.width = `${offset * 100}%`;
}
}
function stopDragging(e) {
isDragging = false;
if (offset >= 0.9) {
sliderContainer.classList.add('slide-success');
setTimeout(() => {
sliderContainer.classList.remove('slide-success');
thumb.style.transform = `translateX(0%)`;
slider.style.width = `0%`;
}, 1000);
} else {
thumb.style.transform = `translateX(0%)`;
slider.style.width = `0%`;
}
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', stopDragging);
}
```
这个示例代码实现了一个带有滑块验证的容器,当用户拖动滑块到达一定阈值时,会显示验证成功的效果,并在1秒后返回到初始状态。