前端实现滑块验证

原创已于 2024-05-18 17:18:57 修改 · 632 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html5

于 2024-05-18 17:18:05 首次发布

css样式

* {
    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-repeat: no-repeat;
    background-size: 280px 200px;
    left: 0;
    position: absolute;
    opacity: 1;
    z-index: 10;
}
#box .img .kuai2 {
    top: 10px;
    left: 100px;
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0.5;
}
#box .slider {
    width: 280px;
    height: 30px;
    margin: 10px auto;
    background-color: #DDDDDD;
    border-radius: 10px;
    position: relative;
}
#box .slider .status {
    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;
}

html代码

<!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>图片不好看? &nbsp; 换一张吧!</span></div>

	<div id="box">
		<h3 class="btit">请完成图片验证</h3>

		<div class="img">
			<img src="img/t5.png" alt="..." id="tu">

			<div class="kuai" style="background-image: url('img/t5.png'); top: 57px; left:0"></div>

			<div class="kuai2"></div>

		</div>

		<div class="slider">
			<div class="status"></div>
			<button type="button" id="btn"></button>
		</div>

	</div>
	<script>
		window.onload = function () {//运行onload事件 确保dom树全部加载完成
			//TODO 实现滑块验证功能
			var box = document.querySelector("#box")
			var btit = document.querySelector(".btit")
			var kuai = document.querySelector(".kuai")
			var kuai2 = document.querySelector(".kuai2")
			var status = document.querySelector(".status")
			var btn = document.querySelector("#btn")
			var slider = document.querySelector(".slider")

			//记录鼠标位置
			var moveZ
			//初始化两个小块的位置
			kuai.style.top = "100px"
			kuai.style.left = "0px"

			kuai2.style.top = "100px"
			kuai2.style.left = "200px"

			kuai.style.backgroundImage = 'url(img/t5.png)'
			kuai.style.backgroundPositionX = "-200px"
			kuai.style.backgroundPositionY = "-100px"

			slider.onmousedown = function () {
				btit.innerHTML = "拖动图片完成验证"
               
				slider.onmousemove = function (e) {
					moveZ = e.clientX - box.offsetLeft - slider.offsetLeft
					if (moveZ > slider.offsetWidth - kuai.offsetWidth / 2) {
						moveZ = slider.offsetWidth - kuai.offsetWidth / 2
					}
					kuai.style.left
						= btn.style.left
						= status.style.width
						= (moveZ + 1) + "px";
				}
			}
			box.onmouseup = function () {
				let yes = kuai.offsetLeft - kuai2.offsetLeft
				slider.onmousemove = null; //删除移动事件
				if (yes < 10 && yes > -10) {
					btit.innerHTML = "验证成功！"
					status.innerHTML = "验证成功"
					btit.style.color = "chartreuse"
				}
			}
		}
	</script>


</body>

</html>

最终实现效果