本文共 5226 字，大约阅读时间需要 17 分钟。
本文实例为大家分享了js实现html滑动图片拼图验证的具体代码，供大家参考，具体内容如下
html：
Documentcss:
*{
margin: 0;
padding: 0;
}
body {
background-color: #E8E8E8;
}
.container{
position: relative;
}
#canva{
background: indianred;
}
#block{
position: absolute;
left: 0px;
}
.refreshIcon{
position: absolute;
left: 280px;
top: 5px;
width: 21px;
height: 20px;
cursor: pointer;
background: url(./refresh.png);
display: block;
}
.verSliderBlock{
height: 40px;
width: 40px;
background-color: #fff;
background:url("./right_arrow.png");
background-size:100%;
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
cursor: pointer;
position: absolute;
text-align: center;
line-height: 40px;
color: #45494c;
font-size: 25px;
font-weight: 400;
}
.bar{
position: relative;
text-align: center;
width: 310px;
height: 40px;
line-height: 40px;
margin-top: 15px;
background: #f7f9fa;
color: #45494c;
border: 1px solid #e4e7eb;
display: block;
}
#bar-mask{
position: absolute;
left: 0;
top: 0;
height: 40px;
border: 0 solid #1991fa;
background: #d1e9fe;
}
js:
(function(window){
var canvas = document.getElementById("canvas");
var block = document.getElementById("block");
var canvas_ctx = canvas.getContext("2d")
var block_ctx = block.getContext("2d")
var img = document.createElement("img")
var refresh = document.querySelector(".refreshIcon")
var x = Math.round(Math.random() * 200) + 10,
y = Math.round(Math.random() * 100) + 10,
w = 42,
l = 42,
r = 10,
PI = Math.PI
console.log(x,y)
//获取图片后面的随机号码
function getRandomNumberByRange(start, end) {
return Math.round(Math.random() * (end - start) + start)
}
//初始化图片
function initImg(){
img.onload = function () {
canvas_ctx.drawImage(img, 0, 0, 310, 155)
block_ctx.drawImage(img, 0, 0, 310, 155)
var blockWidth = w + r * 2
var _y = y - r * 2 + 2 // 滑块实际的y坐标
var ImageData = block_ctx.getImageData(x, _y, blockWidth, blockWidth)
block.width = blockWidth
block_ctx.putImageData(ImageData, 0, _y)
};
img.crossOrigin = "Anonymous"
img.src = "https://picsum.photos/300/150/?image=" + getRandomNumberByRange(0, 100)
}
//清除tupian
function clean(){
x = Math.round(Math.random() * 200) + 10,
y = Math.round(Math.random() * 100) + 10,
console.log(x,y)
canvas_ctx.clearRect(0, 0, 310, 155);
block_ctx.clearRect(0, 0, 310, 155)
block.width = 310
draw(canvas_ctx, "fill")
draw(block_ctx, "clip")
}
//绘制方块
function draw(ctx, operation) {
ctx.beginPath()
ctx.moveTo(x, y)
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI)
ctx.lineTo(x + l, y)
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI)
ctx.lineTo(x + l, y + l)
ctx.lineTo(x, y + l)
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true)
ctx.lineTo(x, y)
ctx.lineWidth = 2
ctx.fillStyle = "rgba(255, 255, 255, 0.7)"
ctx.strokeStyle = "rgba(255, 255, 255, 0.7)"
ctx.stroke()
ctx[operation]()
ctx.globalCompositeOperation = "overlay"
}
initImg()
draw(canvas_ctx, "fill")
draw(block_ctx, "clip")
//添加移动事件
var block_slider = document.querySelector("#block");
var slider = document.querySelector(".verSliderBlock");
var slider_mark = document.querySelector("#bar-mask");
//用于判断当前是否是在按住滑块的情况下
var yd = false
var moveX = 0
var downX = 0
//鼠标按下
slider.onmousedown = function (e) {
downX = e.clientX;
yd = true
}
//鼠标移动事件
function hadleMousemove(e) {
if (yd) {
moveX = e.clientX - downX;
document.querySelector("#slide").innerHTML = ""
if (moveX >= 310) {
moveX = 310 - 40
}
if (moveX > -2) {
slider.style.backgroundColor = "#1991FA";
slider_mark.style.borderWidth = "1px"
slider_mark.style.borderColor = "#1991fa"
slider_mark.style.width = moveX + 40 + "px";
block_slider.style.left = (310 - 40 - 20) / (310 - 40) * moveX + "px";
slider.style.left = moveX + "px";
}
}
}
//鼠标抬起事件
function hadleMouseup(e) {
if (yd) {
slider.onmousemove = null;
console.log(moveX)
block_slider.style.left = (310 - 40 - 20) / (310 - 40) * moveX + "px";
if (Math.abs((310 - 40 - 20) / (310 - 40) * moveX - x) < 10) {
slider.style.background = "url("./success.png")";
slider.style.backgroundSize = "100%"
// alert("验证成功")
setTimeout(() => {
rest();
}, 1000)
} else {
slider_mark.style.backgroundColor = "#fce1e1"
slider_mark.style.borderWidth = "1px"
slider_mark.style.borderColor = "#f57a7a"
slider.style.backgroundColor = "#f57a7a";
slider.style.background = "url("./fail.png")";
slider.style.backgroundSize = "100%"
setTimeout(() => {
rest();
}, 1000)
}
yd = false
}
}
//鼠标在按住滑块下移动
slider.onmousemove = function (e) {
hadleMousemove(e)
}
//鼠标在滑块下抬起
slider.onmouseup = function (e) {
hadleMouseup(e)
}
//设置全局的移动事件,当鼠标按下滑块后,移动过程中鼠标可能会移出滑块,这是滑块也会监听鼠标的移动进行相应的移动
document.addEventListener("mousemove", function (e) {
hadleMousemove(e)
})
document.addEventListener("mouseup", function (e) {
hadleMouseup(e)
})
function rest() {
clean()
document.querySelector("#slide").innerHTML = "向右滑动验证"
slider.style.backgroundColor = "#fff";
slider.style.left = "0px"
slider.style.background = "url("./right_arrow.png")";
slider.style.backgroundSize = "100%"
block_slider.style.left = "0px"
slider_mark.style.width = "0px"
slider_mark.style.backgroundColor = "#d1e9fe"
slider_mark.style.borderWidth = "0px"
slider_mark.style.borderColor = "#d1e9fe"
initImg()
}
//刷新
refresh.onclick = function(){
rest()
}
}(window))
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持云海天教程。
原文链接：https://blog.csdn.net/Hhjian524/article/details/104294249
转载地址：https://blog.csdn.net/weixin_33958381/article/details/117837064 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
