用js做一个图片滑动验证
时间: 2023-05-20 14:07:13 浏览: 71
可以使用HTML5的canvas元素和JavaScript来实现图片滑动验证。以下是一个简单的实现示例:
HTML代码:
```html
<div id="slider">
<canvas id="canvas" width="300" height="150"></canvas>
<div id="sliderBtn"></div>
</div>
```
CSS代码:
```css
#slider {
position: relative;
width: 300px;
height: 150px;
overflow: hidden;
border: 1px solid #ccc;
border-radius: 5px;
}
#sliderBtn {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
}
#sliderBtn:hover {
background: #ccc;
}
```
JavaScript代码:
```javascript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var sliderBtn = document.getElementById('sliderBtn');
var isDragging = false;
var startX = 0;
var endX = 0;
// 生成随机图片
var img = new Image();
img.src = 'https://picsum.photos/300/150/?random';
img.onload = function() {
ctx.drawImage(img, 0, 0);
drawSlider();
};
// 绘制滑块
function drawSlider() {
var x = Math.floor(Math.random() * 200) + 50;
var y = Math.floor(Math.random() * 50) + 50;
var w = 50;
var h = 50;
ctx.fillStyle = '#fff';
ctx.fillRect(x, y, w, h);
ctx.strokeStyle = '#ccc';
ctx.strokeRect(x, y, w, h);
sliderBtn.style.top = y + 'px';
sliderBtn.style.left = x + 'px';
}
// 鼠标按下事件
sliderBtn.addEventListener('mousedown', function(e) {
isDragging = true;
startX = e.clientX;
});
// 鼠标移动事件
document.addEventListener('mousemove', function(e) {
if (isDragging) {
var offsetX = e.clientX - startX;
var x = parseInt(sliderBtn.style.left) + offsetX;
if (x < 0) {
x = 0;
} else if (x > 250) {
x = 250;
}
sliderBtn.style.left = x + 'px';
startX = e.clientX;
}
});
// 鼠标松开事件
document.addEventListener('mouseup', function(e) {
isDragging = false;
endX = parseInt(sliderBtn.style.left);
if (endX >= 200 && endX <= 220) {
alert('验证通过!');
drawSlider();
} else {
sliderBtn.style.left = '0';
}
});
```
这个实现的基本思路是:在canvas上绘制一张随机图片,然后在图片上随机生成一个滑块,用户需要通过拖动滑块来完成验证。当滑块的位置在一定范围内时,认为验证通过。如果验证失败,滑块会回到起始位置,用户需要重新拖动滑块。
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)