前言
趁着业余时间，简单实现了滑动验证码。本文章主基于JQuery实现了滑动验证码的功能。主要是鼠标按下和松开的时候计算并设置滑块的位置，其他都是一些样式，另外用了下JQuery的动画$.animate()。
代码实现
注意事项⚠️：修改图片路径 如果cdn太慢需下载到本地 图片大小需要464*174、可以自己按需要修改 主要结合background-position属性分隔区块
<!DOCTYPE html>
<html>
<head>
<title>滑动验证码</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</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;
//鼠标按在滑块上
$('.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');
});
});
//鼠标按下之后松开
$(window).bind('mouseup',function(){
//松开之后需要移除鼠标移动的监听事件，不然滑块还会继续动
$('.huakuai').unbind('mousemove');
//range是误差范围，因为拼图块和拼图区域大小一样，所以重合之后left和top不应该相差太远，自己定义范围
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');
}
});
//随机位置初始化
function init(){
var randx = ($('.subject').width()-$('.round-excute').width()-20)*Math.random()+10;//拼图区域和块出现范围，-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;
}
//绝对值函数
function abs(x){
return x>=0?x:-x;
}
});
</script>
</html>
感觉复用性方面还是太差了，没有将其组件化，告诫自己下次做事情要做到极致。
PS:另外滑动验证码也不是特别安全，需要结合手机验证码一起使用
