目录结构
<!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)
}
