滑动验证

拖动滑块进行验证码的验证。

滑动验证有两种：

图片滑动验证
长方形的滑动条验证

一：图片滑动验证

效果演示

原始样式
在这里插入图片描述
没有正确验证的时候滑块会直接回到初始位置让你再次滑动验证

验证成功会给出提示
在这里插入图片描述
看代码之前**注意：**代码中要引入相应架包

<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/verify.js" ></script>

代码演示

<!DOCTYPE html>
<html lang="zh-cn">
<head><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/verify.js" ></script>
</head><style>/*滑动验证码*/.verify-bar-area {position: relative;background: #FFFFFF;text-align: center;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border: 1px solid #ddd;-webkit-border-radius: 4px;}.verify-bar-area .verify-move-block {position: absolute;top: 0px;left: 0;background: #fff;cursor: pointer;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;box-shadow: 0 0 2px #888888;-webkit-border-radius: 1px;}.verify-img-panel {margin:0;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border: 1px solid #ddd;border-radius: 3px;position: relative;}.verify-img-panel .verify-refresh {width: 25px;height: 25px;text-align:center;padding: 5px;cursor: pointer;position: absolute;top: 0;right: 0;z-index: 2;}.verify-img-panel .icon-refresh {font-size: 20px;color: #fff;}.verify-img-panel .verify-gap {background-color: #fff;position: relative;z-index: 2;border:1px solid #fff;}.verify-bar-area .verify-move-block .verify-sub-block {position: absolute;text-align: center;z-index: 3;border: 1px solid #fff;}.verify-bar-area .verify-move-block .verify-icon {font-size: 18px;}.verify-bar-area .verify-msg {z-index : 3;}</style><body><div id="mpanel4" style="margin-top:50px;">
</div>
</body>
<script type="text/javascript">$('#mpanel4').slideVerify({type : 2,		//类型vOffset : 5,	//误差量，根据需求自行调整vSpace : 5,	//间隔imgName : ['1.jpg', '2.jpg'],imgSize : {width: '400px',height: '200px',},blockSize : {width: '40px',height: '40px',},barSize : {width : '400px',height : '40px',},ready : function() {},success : function() {alert('验证成功，添加你自己的代码！');//......后续操作},error : function() {
//		        	alert('验证失败！');}});</script>
</html>

关于图片的滑动验证已经结束，下面看一下关于滑动条验证的方式验证。

二：滑动条验证

效果演示

原始样式
在这里插入图片描述
点击滑动

滑动完毕给出成功的提示

看代码之前**注意：**代码中要引入相应架包

	<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/verify.js" ></script>

代码演示

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/verify.js" ></script>
</head>
<style>/*滑动验证码*/.verify-bar-area {position: relative;background: #FFFFFF;text-align: center;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border: 1px solid #ddd;-webkit-border-radius: 4px;}.verify-bar-area .verify-move-block {position: absolute;top: 0px;left: 0;background: #fff;cursor: pointer;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;box-shadow: 0 0 2px #888888;-webkit-border-radius: 1px;}.verify-bar-area .verify-move-block:hover {background-color: #337ab7;color: #FFFFFF;}.verify-bar-area .verify-left-bar {position: absolute;top: -1px;left: -1px;background: #f0fff0;cursor: pointer;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border: 1px solid #ddd;}	</style>
<body><div id="mpanel1" >
</div><script type="text/javascript">$('#mpanel1').slideVerify({type : 1,		//类型vOffset : 5,	//误差量，根据需求自行调整barSize : {width : '80%',height : '40px',},ready : function() {},success : function() {alert('验证成功，添加你自己的代码！');//......后续操作},error : function() {
//		        	alert('验证失败！');}});</script>
</body>
</html>