当然！下面是一个简单的拖动验证效果的实现。这个效果类似于常见的滑块拖动验证码，用户需要将滑块拖动到最右侧以完成验证。
代码说明：
- HTML结构：
- 包含一个滑动容器（
.slider-container），其中包含一个滑动轨道（.slider-track）和一个滑动块（.slider-thumb）。 - 包含一个验证成功的消息（
.success-message）。
- CSS样式：
- 设置了整体布局、颜色、间距等，使页面美观且易于阅读。
- 滑动容器设置了背景色和圆角。
- 滑动轨道初始宽度为0，拖动时会逐渐增加。
- 滑动块设置了圆形样式和阴影，并使用伪元素显示箭头图标。
- 成功消息初始不可见，验证成功后显示。
- JavaScript逻辑：
- 获取DOM元素并添加事件监听器。
- 定义了
mousedown和touchstart事件处理程序，分别在开始拖动时记录起始位置。 - 定义了
mousemove和touchmove事件处理程序，分别在拖动过程中更新滑动块的位置和滑动轨道的宽度。 - 定义了
mouseup和touchend事件处理程序，分别在结束拖动时释放拖动状态。 - 当滑动块到达最右侧时，调用
verifySuccess函数显示成功消息并禁用进一步的拖动操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖动验证效果</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.slider-container {
position: relative;
width: 300px;
height: 50px;
background-color: #e9ecef;
border-radius: 25px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.slider-track {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #007bff;
border-radius: 25px;
transition: width 0.3s ease;
}
.slider-thumb {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: white;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
user-select: none;
transition: left 0.3s ease;
}
.slider-thumb::before {
content: '>';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: #007bff;
}
.success-message {
display: none;
margin-top: 10px;
color: green;
font-weight: bold;
}
.success-message.visible {
display: block;
}
</style>
</head>
<body>
<div class="slider-container" id="slider-container">
<div class="slider-track" id="slider-track"></div>
<div class="slider-thumb" id="slider-thumb"></div>
</div>
<div class="success-message" id="success-message">验证成功！</div>
<script>
const sliderContainer = document.getElementById('slider-container');
const sliderTrack = document.getElementById('slider-track');
const sliderThumb = document.getElementById('slider-thumb');
const successMessage = document.getElementById('success-message');
let isDragging = false;
let startX = 0;
// 开始拖动事件
sliderThumb.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX - sliderThumb.offsetLeft;
sliderContainer.style.userSelect = 'none'; // 禁止文本选择
});
// 鼠标移动事件
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const x = e.clientX - startX;
const maxX = sliderContainer.offsetWidth - sliderThumb.offsetWidth;
const newX = Math.max(0, Math.min(x, maxX));
sliderThumb.style.left = `${newX}px`;
sliderTrack.style.width = `${newX}px`;
if (newX === maxX) {
verifySuccess();
}
});
// 结束拖动事件
document.addEventListener('mouseup', () => {
if (isDragging) {
isDragging = false;
sliderContainer.style.userSelect = ''; // 启用文本选择
}
});
// 触发验证成功
function verifySuccess() {
successMessage.classList.add('visible');
// 移除所有事件监听器以防止进一步的拖动操作
sliderThumb.removeEventListener('mousedown', mousedownHandler);
document.removeEventListener('mousemove', mousemoveHandler);
document.removeEventListener('mouseup', mouseupHandler);
sliderThumb.removeEventListener('touchstart', touchstartHandler);
document.removeEventListener('touchmove', touchmoveHandler);
document.removeEventListener('touchend', touchendHandler);
}
// 移动设备支持
sliderThumb.addEventListener('touchstart', (e) => {
isDragging = true;
startX = e.touches[0].clientX - sliderThumb.offsetLeft;
sliderContainer.style.touchAction = 'none'; // 禁止默认触摸行为
});
document.addEventListener('touchmove', (e) => {
if (!isDragging) return;
const x = e.touches[0].clientX - startX;
const maxX = sliderContainer.offsetWidth - sliderThumb.offsetWidth;
const newX = Math.max(0, Math.min(x, maxX));
sliderThumb.style.left = `${newX}px`;
sliderTrack.style.width = `${newX}px`;
if (newX === maxX) {
verifySuccess();
}
});
document.addEventListener('touchend', () => {
if (isDragging) {
isDragging = false;
sliderContainer.style.touchAction = ''; // 启用默认触摸行为
}
});
// 将事件处理程序存储在变量中以便后续移除
const mousedownHandler = (e) => {
isDragging = true;
startX = e.clientX - sliderThumb.offsetLeft;
sliderContainer.style.userSelect = 'none'; // 禁止文本选择
};
const mousemoveHandler = (e) => {
if (!isDragging) return;
const x = e.clientX - startX;
const maxX = sliderContainer.offsetWidth - sliderThumb.offsetWidth;
const newX = Math.max(0, Math.min(x, maxX));
sliderThumb.style.left = `${newX}px`;
sliderTrack.style.width = `${newX}px`;
if (newX === maxX) {
verifySuccess();
}
};
const mouseupHandler = () => {
if (isDragging) {
isDragging = false;
sliderContainer.style.userSelect = ''; // 启用文本选择
}
};
const touchstartHandler = (e) => {
isDragging = true;
startX = e.touches[0].clientX - sliderThumb.offsetLeft;
sliderContainer.style.touchAction = 'none'; // 禁止默认触摸行为
};
const touchmoveHandler = (e) => {
if (!isDragging) return;
const x = e.touches[0].clientX - startX;
const maxX = sliderContainer.offsetWidth - sliderThumb.offsetWidth;
const newX = Math.max(0, Math.min(x, maxX));
sliderThumb.style.left = `${newX}px`;
sliderTrack.style.width = `${newX}px`;
if (newX === maxX) {
verifySuccess();
}
};
const touchendHandler = () => {
if (isDragging) {
isDragging = false;
sliderContainer.style.touchAction = ''; // 启用默认触摸行为
}
};
</script>
</body>
</html>
No responses yet