目录结构
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>原生js实现图片拖动验证</title> <link rel="stylesheet" type="text/css" href="css/imgyz.css"/> </head> <body> <div class="minbtn"><button type="button"></button><span>图片不好看? 换一张吧!</span></div> </body> <script type="text/javascript" src="js/imgyz.js"></script> <script type="text/javascript"> imgver(); var sxbtn=document.querySelector(".minbtn button"); sxbtn.onclick=function(){ location.reload(); } </script> </html> 度金针、漫牵方寸。有谁来对上联或下联?
此代码由一叶知秋网-知秋君整理* { margin: 0; padding: 0; outline: none; } #box { width: 300px; height: 300px; margin: 0 auto; border: 1px solid #ADADAD; border-radius: 15px; box-shadow: 1px 1px 1px #ADADAD; text-align: center; position: relative; } #box h3 { padding: 10px 0; } #box .img { width: 280px; height: 200px; margin: 0 auto; position: relative; } #box .img img { width: 100%; height: 100%; } #box .img .kuai { width: 50px; height: 50px; background-image: url(../img/01.jpg); background-repeat: no-repeat; background-size: 280px 200px; left: 0; position: absolute; opacity: 0; z-index: 10; } #box .img .kuai2 { top: 10px; left: 100px; position: absolute; width: 50px; height: 50px; background-color: white; } #box .slider { width: 280px; height: 30px; margin: 10px auto; background-color: #DDDDDD; border-radius: 10px; position: relative; } #box .slider .ming { width: 0px; height: 30px; margin: 10px auto; background-color: skyblue; top: -10px; left: 0; border-radius: 10px; position: absolute; color: white; font-weight: bold; line-height: 30px; } #box .slider button { z-index: 20; width: 45px; height: 45px; position: absolute; left: 0; top: -8px; background: white url(../img/yz.png) no-repeat; background-size: 100%; border-radius: 50%; border: 0; } .minbtn { width: 300px; height: 50px; margin: 30px auto; text-align: center; overflow: hidden; line-height: 50px; } .minbtn button { width: 30px; height: 30px; border-radius: 50%; background: url(../img/sx.png) no-repeat; background-size: 100%; border: 0; float: left; } .minbtn span { line-height: 30px; float: left; height: 100%; text-indent: 1em; color: blueviolet; font-weight: bold; }
//dom操作封装 function query(html){ return document.querySelector(html) } var tag = { //滑动验证码方法 verify: function(arr, box, imgbox, btn, img, que, slider, btit,tu,ming) { var atu = arr[Math.floor(Math.random() * (arr.length))] tu.src = atu; img.style.backgroundImage = " url(" + atu + ")" var tap = imgbox.offsetHeight - img.offsetHeight // var lef=imgbox.offsetWidth-img.offsetWidth; var left = Math.random() * (imgbox.offsetWidth - img.offsetWidth - imgbox.offsetWidth / 2) + imgbox.offsetWidth /2; console.log(left) var tops = Math.random() * (tap); img.style.top = tops + "px" que.style.top = tops + "px" que.style.left = left + "px" img.style.backgroundPositionY = -tops + "px"; img.style.backgroundPositionX = -left + "px"; console.log(img.style.top) btn.onmousedown = function() { img.style.opacity = "1" que.style.opacity = "1" ming.innerHTML=""; btit.innerHTML="拖动图片完成验证"; slider.onmousemove = function(event) { console.log(event.offsetX); var zuo = event.clientX - box.offsetLeft - slider.offsetLeft; console.log(zuo) if (zuo > slider.offsetWidth) { zuo = slider.offsetWidth - img.offsetWidth / 2 } btn.style.left = zuo + "px"; img.style.left = zuo + "px"; ming.style.width=zuo+10+"px" } } box.onmouseup = function() { var yes = que.offsetLeft - img.offsetLeft console.log(yes) slider.onmousemove = null if (yes < 10 && yes > -10) { btit.innerHTML = "验证成功√" ming.innerHTML="验证成功" btit.style.color = "chartreuse" img.style.opacity = "0"; que.style.opacity = "0"; return "yes" }else{ btit.innerHTML = "验证失败X" ming.innerHTML="" btit.style.color = "red"; zuo=0 btn.style.left = zuo + "px"; img.style.left = zuo + "px"; ming.style.width=zuo+"px" } } } } function imgver(){ var bigbox=document.createElement("div"); bigbox.id="box"; bigbox.innerHTML='<h3 class="btit">请完成图片验证</h3>'+ '<div class="img">'+'<img src="img/t1.png" alt="..." id="tu">'+ '<div class="kuai"></div>'+'<div class="kuai2"></div></div>'+ '<div class="slider"><div class="ming"></div><button type="button" id="btn"></button></div>' document.body.appendChild(bigbox); var box = query("#box") var imgbox = query(".img"); var btn = query("#btn"); var img = query(".kuai"); var que = query(".kuai2"); var slider = query(".slider"); var btit = query(".btit"); var tu = query("#tu"); var arr = ["img/t1.png", "img/t2.png", "img/t3.png", "img/t4.png", "img/t5.png"]; var ming=query(".ming"); return tag.verify(arr, box, imgbox, btn, img, que, slider, btit,tu,ming) } 