前言
趁著業(yè)余時間，簡單實現(xiàn)了滑動驗證碼。本文章主基于JQuery實現(xiàn)了滑動驗證碼的功能。主要是鼠標(biāo)按下和松開的時候計算并設(shè)置滑塊的位置，其他都是一些樣式，另外用了下JQuery的動畫$.animate()。
代碼實現(xiàn)
注意事項??：修改圖片路徑 如果cdn太慢需下載到本地 圖片大小需要464*174、可以自己按需要修改 主要結(jié)合background-position屬性分隔區(qū)塊
<!DOCTYPE html>
<html>
<head>
<title>滑動驗證碼</title>
<link rel="stylesheet" >
</head>
<style type="text/css">
* {padding: 0;margin: 0;}
.subject{background: url('../image/yanzhengmatest.jpg') no-repeat;width: 464px;height:174px;display: inline-block;position: relative;}
.round-rect{position: absolute;background: white;width: 80px;height: 40px;top: 150px;z-index:999;border-radius:12px; }
.round-excute{background: url('../image/yanzhengmatest.jpg');width: 80px;height: 40px;position: absolute;border-radius:12px;z-index:9999;top: 150px;overflow: hidden;left: 10px;}
.scroll{background: #dedede;width: 464px;height: 30px;position: relative;border-radius: 5px;}
.huakuai{background: white;height: 30px;width: 80px;position: absolute;left: 10px;border-radius: 5px;overflow: hidden;}
.bar{background: #5b91f6;height: 30px;width: 10px;position: absolute;}
.subject .success{width: 100px;height: 40px;border-radius: 5px;border:2px solid #efefef;background: #efefff;display: inline-block;left:180px;top: 50px;position: absolute;display: none;}
.subject .success span.glyphicon-ok{color: green;font-size: 20px;}
.subject .success .round{width: 30px;height: 30px;display: inline-block;background: #4491f1;border-radius: 50%;text-align: center;}
</style>
<body>
<center>
<div class="subject">
<div class="round-excute"></div>
<div class="round-rect"></div>
<div class="success">
<span class="round">
<span class="glyphicon glyphicon-ok"></span></span>驗證成功
</div>
</div>
<!-- <div style="background:url('../image/yanzhengmatest.jpg'); background-position: 0px 0px;width: 80px;height: 40px;">
</div> -->
<div class="scroll">
<div class="huakuai"></div>
<div class="bar"></div>
</div>
</center>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var range = 5;
//var initTop = init();
var initTop = init();
var initposition = {'x':0,'y':0};
var initx=$('.subject').offset().left;
//鼠標(biāo)按在滑塊上
$('.huakuai').bind('mousedown',function(e){
initposition.x=e.offsetX;
initposition.y=e.offsetY;
$('.huakuai').bind('mousemove',function(e){
$(this).css('left',Math.min(Math.max(10,e.clientX-initx-10-initposition.x),$('.scroll').width()-$('.huakuai').width())+'px');
$('.round-excute').css('left',Math.min(Math.max(10,e.clientX-initx-10-initposition.x),$('.scroll').width()-$('.huakuai').width())+'px');
$('.scroll .bar').css('width',Math.min(Math.max(10,e.clientX-initx-10-initposition.x),$('.scroll').width()-$('.huakuai').width())+'px');
});
});
//鼠標(biāo)按下之后松開
$(window).bind('mouseup',function(){
//松開之后需要移除鼠標(biāo)移動的監(jiān)聽事件，不然滑塊還會繼續(xù)動
$('.huakuai').unbind('mousemove');
//range是誤差范圍，因為拼圖塊和拼圖區(qū)域大小一樣，所以重合之后left和top不應(yīng)該相差太遠(yuǎn)，自己定義范圍
if(!(abs($('.round-rect').offset().left-$('.round-excute').offset().left)>range || abs($('.round-rect').offset().top-$('.round-excute').offset().top)>range )){
$('.subject .success').show();
}
else {
//沒對齊松手后還原位置
$('.huakuai').animate({'left':'10px'},'fast');
$('.round-excute').animate({'left':'10px','top':initTop},'fast');
$('.scroll .bar').animate({'width' : 10+'px'},'fast');
}
});
//隨機(jī)位置初始化
function init(){
var randx = ($('.subject').width()-$('.round-excute').width()-20)*Math.random()+10;//拼圖區(qū)域和塊出現(xiàn)范圍，-20和=10是為了間隙
var randy = ($('.subject').height()-$('.round-excute').height()-20)*Math.random()+10;
$('.round-rect').css('left',randx+'px');
$('.round-rect').css('top',randy+'px');
console.log(randx+','+randy);
$('.round-excute').css('background-position',-randx+'px '+(-randy)+'px')
console.log(-randx+'px '+(-randy)+'px');
$('.round-excute').css('top',randy+'px');
return randy;
}
//絕對值函數(shù)
function abs(x){
return x>=0?x:-x;
}
});
</script>
</html>
感覺復(fù)用性方面還是太差了，沒有將其組件化，告誡自己下次做事情要做到極致。
PS:另外滑動驗證碼也不是特別安全，需要結(jié)合手機(jī)驗證碼一起使用
