一、為什么會有滑塊登錄驗證
很多網站為了防止機器人登錄操作，往往會會添加一個滑塊拼圖驗證，必須要拖拽拼成完整才能登錄成功。
二、案例展示
刷新頁面，即可產生隨機位置的兩個方塊，只有圖片滑塊滑倒空白方塊附近才能算驗證成功，可以設置允許有幾像素的誤差；離目標較遠會自動返回。
三、具體實現代碼
<!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>
