一、为什么会有滑块登录验证
很多网站为了防止模拟登录操作，往往会会添加一个滑块拼图验证，必须要拖拽拼成完整才能登录成功。
二、案例展示
开始产生随机位置的两个方块，只有图片滑块滑倒空白方块附近才能算验证成功，可以设置允许有几像素的误差；离目标较远会自动返回。
三、具体实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 533px;
height: 300px;
margin: 0 auto;
position: relative;
}
.box .main {
width: 100%;
height: 100%;
display: block;
}
.btn {
width: 533px;
height: 50px;
margin: 0 auto;
border: 1px #000 solid;
position: relative;
}
.btn em {
width: 40px;
height: 40px;
position: absolute;
left: 0;
top: 5px;
background: #aaa;
}
</style>
</head>
<body>
<div class="box">
<img class="main" src="./images/1.jpg" alt="" srcset="">
</div>
<div class="btn">
<em></em>
</div>
</body>
<script src="./move.js"></script>
<script>
class tz {
*constructor() {
this.btnSpan = document.querySelector(‘.btn em‘);
this.box = document.querySelector(‘.box‘);
this.init();
}*
init() {*
// 产生随机top值
this.top = randomNum(0,this.box.offsetHeight-this.btnSpan.offsetHeight);
// 产生随机left值
this.left = randomNum(this.box.offsetWidth/2,this.box.offsetWidth-this.btnSpan.offsetWidth);
//循环创建两个随机位置的方块，top值一致
for(var i = 0;i<2;i++){
*this.createSmall(i);
}
*this.span = document.querySelectorAll(‘.box span‘);
*this.btnSpan.onmousedown = (eve) => {
* var e = eve || event;
*this.obj = {
x: e.offsetX,
* y: e.offsetY
}
this.move();
this.up();
}
}
move() {
document.onmousemove = (eve) => {
var e = eve || event;
this.l = e.pageX - this.box.offsetLeft - this.obj.x;
if (this.l < 0) this.l = 0;
if (this.l >= this.box.offsetWidth - this.btnSpan.offsetWidth) {
this.l = this.box.offsetWidth - this.btnSpan.offsetWidth-1;
}
this.span[1].style.left = this.l + ‘px‘;
this.btnSpan.style.left = this.l + ‘px‘;
return false;
}
}
up() {
document.onmouseup = (eve) => {
if(this.l<this.span[0].offsetLeft || this.l>this.span[0].offsetLeft+3){
move(this.btnSpan,{left:0});
move(this.span[1],{left:0});
}
document.onmousemove = null;
document.onmouseup = null;
}
}
createSmall(i){
var span = document.createElement(‘span‘);
span.style.cssText = `width:40px;height:40px;position:absolute;top:${this.top}px;overflow:hidden`;
// overflow:hidden;
if(i==1){
span.style.left = 0 + ‘px‘;
span.style.zIndex =‘2‘;
var img = document.createElement(‘img‘);
img.src = ‘./images/1.jpg‘;
img.style.cssText = `position:absolute;left:${-this.left}px;top:${-this.top}px;`;
span.appendChild(img);
}else{
span.style.left = this.left + ‘px‘;
span.style.background = ‘rgba(255,255,255)‘;
}
this.box.appendChild(span);
}
}
new tz;
function randomNum(min, max) {
if (min > max) {
var t = max;
max = min;
min = t;
}
return Math.floor(Math.random() * (max - min + 1) + min);
}
</script>
</html>
js-滑块拼图登录验证