(编辑：jimmy 日期: 2024/12/27 浏览：2)
本文实例为大家分享了js实现html滑动图片拼图验证的具体代码，供大家参考，具体内容如下
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./index.css" > <title>Document</title> </head> <body> <div class="container"> <canvas width="310" height="155" id="canvas"></canvas> <canvas width="310" height="155" id="block"></canvas> <div class="refreshIcon"></div> <div class="bar"> <div id="bar-mask"> <div class="verSliderBlock"></div> </div> <span id="slide">向右滑动验证</span> </div> </div> <script src="/UploadFiles/2021-04-02/index.js">css:
*{ 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/"#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))以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。