一、為什么會有滑塊登錄驗證
很多網站為了防止機器人登錄操作，往往會會添加一個滑塊拼圖驗證，必須要拖拽拼成完整才能登錄成功。
二、案例展示
本文使用的是基於jquery的語法以及jquery動畫特效實現表單拖拽拼圖驗證，刷新頁面，產生隨機位置的兩個方塊，只有圖片滑塊滑倒空白方塊附近才能算驗證成功，可以設置允許有幾像素的誤差；離目標較遠會自動返回。
三、具體實現代碼
<!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="1.jpg" alt="" srcset="">
</div>*
<div class="btn">
<em></em>
</div>
</body>
<script src="jquery.min.js">*</script>
<script>
var l;
createBlock();
function createBlock(){
//初始確定兩個方塊的位置，產生范圍隨機數
var top = randomNum(0,230);
var left = randomNum(300,480);
//循環創建不同位置的兩個方塊
for(var i = 0 ; i < 2;i++){
$div = $('<span></span>');
//左側方塊里面需要插入一張與原圖一樣的圖片
if(i == 1){
$img = $('<img src="1.jpg" alt="">');
$img.css({
position:'absolute',
top : -top,
left:-left
});
$div.append($img);
$div.css({
position : 'absolute',
top,
left:0,
zIndex:2,
width:40,
height:40,
overflow:'hidden',
background:'#fff'
})
}else{
$div.css({
position : 'absolute',
top,
left,
zIndex:2,
width:40,
height:40,
overflow:'hidden',
background:'#fff'
})
}
$('.box').append($div);
}
}
//利用jquery的鼠標按下，移動，抬起三個時間完成拖拽效果
$('em').mousedown(function (eve) {
$(document).mousemove(function (eve) {
//拖動過程中判斷位置，限制滑塊可移動區域
l = eve.clientX - $('.box').offset().left - $('em').outerWidth() / 2;
if (l < 0) {
l = 0;
}
if (l > $('.box').outerWidth() - $('em').outerWidth()) {
l = $('.box').outerWidth() - $('em').outerWidth();
}
$('em').css({
left: l
})
$('.box span:nth-of-type(2)').css({
left: l
})
})
$(document).mouseup(function () {
//鼠標抬起時候判斷是否到達目的地，距離差距太大，則返回初始狀態
console.log($('.box span:nth-of-type(1)').position().left);
if( l < $('.box span:nth-of-type(1)').position().left || l>$('.box span:nth-of-type(1)').position().left+5){
$('em').animate({
left:0
},500);
$('.box span:nth-of-type(2)').animate({
left:0
},500)
}
// jquery清除事件的方法
$(document).unbind("mousemove")
$(document).unbind("mouseup")
})
})
// 產生范圍隨機數
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>
