首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

多种类型jQuery网页验证码插件代码实例

Posted in jQuery onJanuary 09, 2021

html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>jQuery网页验证码插件</title>
<link rel="stylesheet" type="text/css" href="css/verify.css" rel="external nofollow" >
</head>
<body>
<h3>数字字母验证码</h3>
<div id="mpanel2" ></div>
<button type="button" id="check-btn" class="verify-btn">确定</button>
<h3 style="margin-top: 20px">算数验证码</h3>
<div id="mpanel3"></div>
<button type="button" id="check-btn2" class="verify-btn">确定</button>
 
<h3 style="margin-top: 20px">滑动验证码</h3>
<div id="mpanel1" ></div>
 
<h3 style="margin-top: 20px">拼图验证码</h3>
<div id="mpanel4"></div>
 
<h3 style="margin-top:30px;">点选验证码</h3>
<div id="mpanel5">
</div>
<div id="mpanel6" style="margin-top:30px;">
</div>
 
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/verify.js" ></script>
<script type="text/javascript">
	$('#mpanel2').codeVerify({
		type : 1,
		width : '200px',
		height : '50px',
		fontSize : '30px',
		codeLength : 6,
		btnId : 'check-btn',
		ready : function() {
		},
		success : function() {
			alert('验证匹配！');
		},
		error : function() {
			alert('验证码不匹配！');
		}
	});
 
	$('#mpanel3').codeVerify({
		type : 2,
		figure : 50,	//位数，仅在type=2时生效
		arith : 0,	//算法，支持加减乘，不填为随机，仅在type=2时生效
		width : '200px',
		height : '50px',
		fontSize : '30px',
		btnId : 'check-btn2',
		ready : function() {
		},
		success : function() {
			alert('验证匹配！');
		},
		error : function() {
			alert('验证码不匹配！');
		}
	});
 
	$('#mpanel1').slideVerify({
		type : 1,		//类型
		vOffset : 5,	//误差量，根据需求自行调整
		barSize : {
			width : '50%',
			height : '40px',
		},
		ready : function() {
		},
		success : function() {
			alert('验证成功，添加你自己的代码！');
			//......后续操作
		},
		error : function() {
//		 alert('验证失败！');
		}
 
	});
	$('#mpanel4').slideVerify({
		type : 2,		//类型
		vOffset : 5,	//误差量，根据需求自行调整
		vSpace : 5,	//间隔
		imgName : ['1.jpg', '2.jpg'],
		imgSize : {
			width: '300px',
			height: '200px',
		},
		blockSize : {
			width: '40px',
			height: '40px',
		},
		barSize : {
			width : '300px',
			height : '40px',
		},
		ready : function() {
		},
		success : function() {
			alert('验证成功，添加你自己的代码！');
			//......后续操作
		},
		error : function() {
//		 	alert('验证失败！');
		}
 
	});
 
 
	$('#mpanel5').pointsVerify({
		defaultNum : 4,	//默认的文字数量
		checkNum : 2,	//校对的文字数量
		vSpace : 5,	//间隔
		imgName : ['1.jpg', '2.jpg'],
		imgSize : {
			width: '400px',
			height: '200px',
		},
		barSize : {
			width : '400px',
			height : '40px',
		},
		ready : function() {
		},
		success : function() {
			alert('验证成功，添加你自己的代码！');
			//......后续操作
		},
		error : function() {
//		 	alert('验证失败！');
		}
 
	});
 
	$('#mpanel6').pointsVerify({
		defaultNum : 4,	//默认的文字数量
		checkNum : 2,	//校对的文字数量
		vSpace : 5,	//间隔
		imgName : ['1.jpg', '2.jpg'],
		imgSize : {
			width: '400px',
			height: '200px',
		},
		barSize : {
			width : '400px',
			height : '40px',
		},
		ready : function() {
		},
		success : function() {
			alert('验证成功，添加你自己的代码！');
			//......后续操作
		},
		error : function() {
//		 	alert('验证失败！');
		}
	});
 
</script>
 
</body>
</html>

verify.css

/*常规验证码*/
.verify-code {
	font-size: 20px;
	text-align: center;
	cursor: pointer;
	margin-bottom: 5px;
	border: 1px solid #ddd;
}
 
.cerify-code-panel {
	height:100%;
	overflow:hidden;
}
 
.verify-code-area {
	float:left;
}
 
.verify-input-area {
	float: left;
	width: 60%;
	padding-right: 10px;
}
.verify-change-area {
	line-height: 30px;
	float: left;
}
.varify-input-code {
	display:inline-block;
	width: 100%;
	height: 25px;
}
 
.verify-change-code {
	color: #337AB7;
	cursor: pointer;
}
 
.verify-btn {
	width: 200px;
	height: 30px;
	background-color: #337AB7;
	color:#FFFFFF;
	border:none;
	margin-top: 10px;
}
 
 
 
 
 
 
/*滑动验证码*/
.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;
}
 
.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;
}
 
/*字体图标的css*/
@font-face {font-family: "iconfont";
 src: url('../fonts/iconfont.eot?t=1508229193188'); /* IE9*/
 src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAaAAAsAAAAACUwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kiSY21hcAAAAYAAAAB3AAABuM+qBlRnbHlmAAAB+AAAAnQAAALYnrUwT2hlYWQAAARsAAAALwAAADYPNwajaGhlYQAABJwAAAAcAAAAJAfeA4dobXR4AAAEuAAAABMAAAAYF+kAAGxvY2EAAATMAAAADgAAAA4CvAGsbWF4cAAABNwAAAAfAAAAIAEVAF1uYW1lAAAE/AAAAUUAAAJtPlT+fXBvc3QAAAZEAAAAPAAAAE3oPPXPeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxbwtzwv4EhhrmBoQEozAiSAwAw1A0UeJzFkcENgCAMRX8RjCGO4gTe9eQcnhzAfXC2rqG/hYsT8MmD9gdS0gJIAAaykAjIBYHppCvuD8juR6zMJ67A89Zdn/f1aNPikUn8RvYo8G20CjKim6Rf6b9m34+WWd/vBr+oW8V6q3vF5qKlYrPRp4L0Ad5nGL8AeJxFUc9rE0EYnTezu8lMsrvtbrqb3TRt0rS7bdOmdI0JbWmCtiItIv5oi14qevCk9SQVLFiQgqAF8Q9QLKIHLx48FkHo3ZNnFUXwD5C2B6dO6sFhmI83w7z3fe8RnZCjb2yX5YlLhskkmScXCIFRxYBFiyjH9Rqtoqes9/g5i8WVuJyqDNTYLPwBI+cljXrkGynDhoU+nCgnjbhGY5yst+gMEq8IBIXwsjPU67CnEPm4b0su0h309Fd67da4XBhr55KSm17POk7gOE/Shq6nKdVsC7d9j+tcGPKVboc9u/0jtB/ZIA7PXTVLBef6o/paccjnwOYm3ELJetPuDrvV3gg91wlSXWY6H5qVwRzWf2TybrYYfSdqoXOwh/Qa8RWIjBTiSI3h614/vKSNRhONOrsnQi6Xf4nQFQDTmJE1NKbhI6crHEJO/+S5QPxhYJRRyvBFBP+5T9EPpEAIVzzRQIrjmJ6jY1WTo+NXTMchuBsKuS8PRZATSMl9oTA4uNLkeIA0V1UeqOoGQh7IAxGo+7T83fn3T+voqCNPPAUazUYUI7LgKSV1Jk2oUeghYGhZ+cKOe2FjVu5ZKEY2VkE13AK1+jI4r1KLbPlZfrKiPhOXKPRj7q9sj9XJ7LFHNmrKJS3VCdhXGSdKrtmoQaWeMjQVt0KD6sGPOx0oH2fgtzoNROxtNq8F3tzYM/n+TjKSX5qf2jx941276TIr9FjXxKr8eX/6bK4yuopwo9py1sw8F9kdw4AmurRpLUM3tYx5ZnKpfHPi8dzz19vJ6MjyxYUrpqeb1uLs3eGV6vr21pSqpeWkqonAN9oUyIiXpv8XvlN5e3icY2BkYGAA4n0vN4fG89t8ZeBmYQCBa9wPPRH0/wcsDMwmQC4HAxNIFABAfAqaAHicY2BkYGBu+N/AEMPCAAJAkpEBFbABAEcMAm94nGNhYGBgfsnAwMKAigESnwEBAAAAAAAAdgCkANoBCAFsAAB4nGNgZGBgYGMIZGBlAAEmIOYCQgaG/2A+AwARSAFzAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgI2RiZGZkYWRlZGNkZ2BsYI1OSM1OZs1OSe/OJW1KDM9o4S9KDWtKLU4g4EBAJ79CeQ=') format('woff'),
 url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); /* iOS 4.1- */
}
 
.iconfont {
 font-family:"iconfont" !important;
 font-size:16px;
 font-style:normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
 
.icon-check:before { content: "\e645"; }
 
.icon-close:before { content: "\e646"; }
 
.icon-right:before { content: "\e6a3"; }
 
.icon-refresh:before { content: "\e6a4"; }

verify.js

/*! Verify-v0.1.0 MIT License by 大熊*/
 
;(function($, window, document,undefined) {
 
	//定义Code的构造函数
 var Code = function(ele, opt) {
 this.$element = ele,
 this.defaults = {
 	type : 1,
 	figure : 100,	//位数，仅在type=2时生效
 	arith : 0,	//算法，支持加减乘，0为随机，仅在type=2时生效
 	width : '200px',
		 height : '60px',
		 fontSize : '30px',
 	codeLength : 6,
 	btnId : 'check-btn',
 	ready : function(){},
 	success : function(){},
  error : function(){}
 },
 this.options = $.extend({}, this.defaults, opt)
 };
 var _code_chars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
 var _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0'];
 var _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC'];
 
 //定义Code的方法
 Code.prototype = {
 	init : function() {
			var _this = this;
			this.loadDom();
			this.setCode();
			this.options.ready();
			this.$element[0].onselectstart = document.body.ondrag = function(){
				return false;
			};
			//点击验证码
			this.$element.find('.verify-code, .verify-change-code').on('click', function() {
				_this.setCode();
			});
			//确定的点击事件
			this.htmlDoms.code_btn.on('click', function() {
				_this.checkCode();
			});
 	},
 
 	//加载页面
 	loadDom : function() {
 		var panelHtml = '<div class="cerify-code-panel">\
  <div class="verify-code"></div>\
  <div class="verify-code-area">\
   <div class="verify-input-area">\
   <input type="text" class="varify-input-code"/>\
   </div>\
   <div class="verify-change-area">\
   <a class="verify-change-code">换一张</a>\
   </div>\
  </div>\
  </div>';
 	this.$element.append(panelHtml);
 
 	this.htmlDoms = {
 		code_btn : $('#'+this.options.btnId),
 		code : this.$element.find('.verify-code'),
 		code_area : this.$element.find('.verify-code-area'),
 		code_input : this.$element.find('.varify-input-code'),
 	};
 
 	this.htmlDoms.code.css({'width':this.options.width, 'height':this.options.height,'line-height':this.options.height, 'font-size':this.options.fontSize});
 	this.htmlDoms.code_area.css({'width':this.options.width});
 	},
 
 	//设置验证码
 	setCode : function() {
 		var color1Num = Math.floor(Math.random() * 3);
 		var color2Num = Math.floor(Math.random() * 5);
 
 		this.htmlDoms.code.css({'background-color': _code_color1[color1Num], 'color': _code_color2[color2Num]});
 		this.htmlDoms.code_input.val('');
 
 		var code = '';
 		this.code_chose = '';
 
 		if(this.options.type == 1) {	//普通验证码
				for(var i = 0; i < this.options.codeLength; i++) {
					var charNum = Math.floor(Math.random() * 52);
					var tmpStyle = (charNum%2 ==0)? "font-style:italic;margin-right: 10px;":"font-weight:bolder;";
					tmpStyle += (Math.floor(Math.random() * 2) == 1)? "font-weight:bolder;":"";
					this.code_chose += _code_chars[charNum];
					code += '<font style="'+tmpStyle+'">'+_code_chars[charNum]+'</font>';
				}
 		}else {		//算法验证码
 			var num1 = Math.floor(Math.random() * this.options.figure);
 			var num2 = Math.floor(Math.random() * this.options.figure);
 
 			if(this.options.arith == 0) {
 				var tmparith = Math.floor(Math.random() * 3);
 			}
 
 			switch(tmparith) {
 				case 1 :
 					this.code_chose = parseInt(num1) + parseInt(num2);
 					code = num1 + ' + ' + num2 + ' = ?';
 					break;
 				case 2 :
 					if(parseInt(num1) < parseInt(num2)) {
 						var tmpnum = num1;
 						num1 = num2;
 						num2 = tmpnum;
 					}
 					this.code_chose = parseInt(num1) - parseInt(num2);
 					code = num1 + ' - ' + num2 + ' = ?';
 					break;
 				default :
 					this.code_chose = parseInt(num1) * parseInt(num2);
 					code = num1 + ' × ' + num2 + ' = ?';
 					break;
 			}
 		}
 
 		this.htmlDoms.code.html(code);
 
 	},
 
 	//比对验证码
 	checkCode : function() {
 		if(this.options.type == 1) {		//普通验证码
 			var own_input = this.htmlDoms.code_input.val().toUpperCase();
 			this.code_chose = this.code_chose.toUpperCase();
 		}else {
 			var own_input = this.htmlDoms.code_input.val();
 		}
 
 		if(own_input == this.code_chose) {
 			this.options.success();
 		}else {
 			this.options.error();
 			this.setCode();
 		}
 	}
 };
 
 
 //定义Slide的构造函数
 var Slide = function(ele, opt) {
 this.$element = ele,
 this.defaults = {
 
 	type : 1,
 	vOffset: 5,
  vSpace : 5,
  imgName : ['1.jpg', '2.jpg'],
  imgSize : {
	 	width: '400px',
	 	height: '200px',
	 },
	 blockSize : {
	 	width: '50px',
	 	height: '50px',
	 },
	 barSize : {
	 	width : '400px',
	 	height : '40px',
	 },
  ready : function(){},
 	success : function(){},
  error : function(){}
 
 },
 this.options = $.extend({}, this.defaults, opt)
 };
 
 
 //定义Slide的方法
 Slide.prototype = {
 
 init: function() {
 	var _this = this;
 
 	//加载页面
 	this.loadDom();
 	this.options.ready();
 
 	this.$element[0].onselectstart = document.body.ondrag = function(){
				return false;
			};
 
 	//按下
 	this.htmlDoms.move_block.on('touchstart', function(e) {
 		_this.start(e);
 	});
 
 	this.htmlDoms.move_block.on('mousedown', function(e) {
 		_this.start(e);
 	});
 
 	//拖动
  window.addEventListener("touchmove", function(e) {
  	_this.move(e);
  });
  window.addEventListener("mousemove", function(e) {
  	_this.move(e);
  });
 
  //鼠标松开
  window.addEventListener("touchend", function() {
  	_this.end();
  });
  window.addEventListener("mouseup", function() {
  	_this.end();
  });
 
  //刷新
  _this.$element.find('.verify-refresh').on('click', function() {
  	_this.refresh();
  });
 },
 
 //初始化加载
 loadDom : function() {
 	this.img_rand = Math.floor(Math.random() * this.options.imgName.length);			//随机的背景图片
 
 	var panelHtml = '';
 	var tmpHtml = '';
 
 	if(this.options.type != 1) {		//图片滑动
 		panelHtml += '<div class="verify-img-panel">\
  <div class="verify-refresh">\
   <i class="iconfont icon-refresh"></i>\
  </div>\
   <div class="verify-gap"></div>\
  </div>';
 		tmpHtml = '<div class="verify-sub-block"></div>';
 	}
 
 	panelHtml += '<div class="verify-bar-area">\
  <span class="verify-msg">向右滑动完成验证</span>\
  <div class="verify-left-bar">\
  <span class="verify-msg"></span>\
  <div class="verify-move-block">\
  <i class="verify-icon iconfont icon-right"></i>'+tmpHtml+'</div></div></div>';
 	this.$element.append(panelHtml);
 
 	this.htmlDoms = {
 		gap : this.$element.find('.verify-gap'),
 		sub_block : this.$element.find('.verify-sub-block'),
 		img_panel : this.$element.find('.verify-img-panel'),
 		bar_area : this.$element.find('.verify-bar-area'),
 		move_block : this.$element.find('.verify-move-block'),
 		left_bar : this.$element.find('.verify-left-bar'),
 		msg : this.$element.find('.verify-msg'),
 		icon : this.$element.find('.verify-icon'),
 		refresh :this.$element.find('.verify-refresh')
 	};
 
 	this.status = false;	//鼠标状态
 	this.setSize = this.resetSize(this);	//重新设置宽度高度
 
 	this.htmlDoms.gap.css({'width': this.options.blockSize.width, 'height': this.options.blockSize.height});
 	this.htmlDoms.sub_block.css({'width': this.options.blockSize.width, 'height': this.options.blockSize.height});
 	this.htmlDoms.img_panel.css({'width': this.setSize.img_width, 'height': this.setSize.img_height, 'background': 'url(images/'+this.options.imgName[this.img_rand]+')', 'background-size' : this.setSize.img_width + ' '+ this.setSize.img_height});
 	this.htmlDoms.bar_area.css({'width': this.setSize.bar_width, 'height': this.options.barSize.height, 'line-height':this.options.barSize.height});
 	this.htmlDoms.move_block.css({'width': this.options.barSize.height, 'height': this.options.barSize.height});
 	this.htmlDoms.left_bar.css({'width': this.options.barSize.height, 'height': this.options.barSize.height});
 
 	this.randSet();
 },
 
 //鼠标按下
 start: function(e) {
 	this.htmlDoms.msg.text('');
 	this.htmlDoms.move_block.css('background-color', '#337ab7');
 	this.htmlDoms.left_bar.css('border-color', '#337AB7');
 	this.htmlDoms.icon.css('color', '#fff');
 	e.stopPropagation();
 	this.status = true;
 },
 //鼠标移动
 move: function(e) {
 	if(this.status) {
	  if(!e.touches) { //兼容移动端
	  var x = e.clientX;
	  }else { //兼容PC端
	  var x = e.touches[0].pageX;
	  }
	  var bar_area_left = Slide.prototype.getLeft(this.htmlDoms.bar_area[0]);
	  var move_block_left = x - bar_area_left; //小方块相对于父元素的left值
	  if(this.options.type != 1) {		//图片滑动
	  	if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2) {
	  	move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2;
	  	}
	  }else {		//普通滑动
	  	if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3) {
	  		this.$element.find('.verify-msg:eq(1)').text('松开验证');
	  	move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3;
	  	}else {
	  		this.$element.find('.verify-msg:eq(1)').text('');
	  	}
	  }
 
 
	  if(move_block_left <= 0) {
  		move_block_left = parseInt(parseInt(this.options.blockSize.width)/2);
  	}
 
	  //拖动后小方块的left值
	  this.htmlDoms.move_block.css('left', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
	  this.htmlDoms.left_bar.css('width', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
	 }
 },
 
 //鼠标松开
 end: function() {
 
 	var _this = this;
 
 	//判断是否重合
 	if(this.status) {
 
 		if(this.options.type != 1) {		//图片滑动
 
 			var vOffset = parseInt(this.options.vOffset);
		  if(parseInt(this.htmlDoms.gap.css('left')) >= (parseInt(this.htmlDoms.move_block.css('left')) - vOffset) && parseInt(this.htmlDoms.gap.css('left')) <= (parseInt(this.htmlDoms.move_block.css('left')) + vOffset)) {
		  	this.htmlDoms.move_block.css('background-color', '#5cb85c');
		  	this.htmlDoms.left_bar.css({'border-color': '#5cb85c', 'background-color': '#fff'});
		  	this.htmlDoms.icon.css('color', '#fff');
		  	this.htmlDoms.icon.removeClass('icon-right');
		  	this.htmlDoms.icon.addClass('icon-check');
		  	this.htmlDoms.refresh.hide();
		  	this.htmlDoms.move_block.unbind('mousedown touchstart');
		  	this.options.success();
		  }else{
		  	this.htmlDoms.move_block.css('background-color', '#d9534f');
		  	this.htmlDoms.left_bar.css('border-color', '#d9534f');
		  	this.htmlDoms.icon.css('color', '#fff');
		  	this.htmlDoms.icon.removeClass('icon-right');
		  	this.htmlDoms.icon.addClass('icon-close');
 
		  	setTimeout(function () {
					 	_this.htmlDoms.move_block.animate({'left':'0px'}, 'fast');
					 	_this.htmlDoms.left_bar.animate({'width': '40px'}, 'fast');
					 	_this.htmlDoms.left_bar.css({'border-color': '#ddd'});
 
					 	_this.htmlDoms.move_block.css('background-color', '#fff');
					 	_this.htmlDoms.icon.css('color', '#000');
					 	_this.htmlDoms.icon.removeClass('icon-close');
		  		_this.htmlDoms.icon.addClass('icon-right');
		  		_this.$element.find('.verify-msg:eq(0)').text('向右滑动完成验证');
 
					 }, 400);
 
		  	this.options.error();
		  }
 
 		}else {		//普通滑动
 
 			if(parseInt(this.htmlDoms.move_block.css('left')) >= (parseInt(this.setSize.bar_width) - parseInt(this.options.barSize.height) - parseInt(this.options.vOffset))) {
 				this.htmlDoms.move_block.css('background-color', '#5cb85c');
 				this.htmlDoms.left_bar.css({'color': '#4cae4c', 'border-color': '#5cb85c', 'background-color': '#fff' });
 				this.htmlDoms.icon.css('color', '#fff');
		  	this.htmlDoms.icon.removeClass('icon-right');
		  	this.htmlDoms.icon.addClass('icon-check');
		  	this.htmlDoms.refresh.hide();
		  	this.htmlDoms.move_block.unbind('mousedown');
		  	this.htmlDoms.move_block.unbind('touchstart');
 				this.$element.find('.verify-msg:eq(1)').text('验证成功');
 				this.options.success();
 			}else {
 
 				this.htmlDoms.move_block.css('background-color', '#d9534f');
		  	this.htmlDoms.left_bar.css('border-color', '#d9534f');
		  	this.htmlDoms.icon.css('color', '#fff');
		  	this.htmlDoms.icon.removeClass('icon-right');
		  	this.htmlDoms.icon.addClass('icon-close');
 
		  	setTimeout(function () {
					 	_this.htmlDoms.move_block.animate({'left':'0px'}, 'fast');
					 	_this.htmlDoms.left_bar.animate({'width': '40px'}, 'fast');
					 	_this.htmlDoms.left_bar.css({'border-color': '#ddd'});
 
					 	_this.htmlDoms.move_block.css('background-color', '#fff');
					 	_this.htmlDoms.icon.css('color', '#000');
					 	_this.htmlDoms.icon.removeClass('icon-close');
		  		_this.htmlDoms.icon.addClass('icon-right');
		  		_this.$element.find('.verify-msg:eq(0)').text('向右滑动解锁');
 
					 }, 400);
 
		  	this.options.error();
 			}
 		}
 
	  this.status = false;
 	}
 },
 
 
 resetSize : function(obj) {
 	var img_width,img_height,bar_width,bar_height;	//图片的宽度、高度，移动条的宽度、高度
 	var parentWidth = obj.$element.parent().width() || $(window).width();
 	var parentHeight = obj.$element.parent().height() || $(window).height();
 
 		if(obj.options.imgSize.width.indexOf('%')!= -1){
 		img_width = parseInt(obj.options.imgSize.width)/100 * parentWidth + 'px';
		}else {
				img_width = obj.options.imgSize.width;
			}
 
			if(obj.options.imgSize.height.indexOf('%')!= -1){
 		img_height = parseInt(obj.options.imgSize.height)/100 * parentHeight + 'px';
		
}else {
				img_height = obj.options.imgSize.height;
			}
 
			if(obj.options.barSize.width.indexOf('%')!= -1){
 		bar_width = parseInt(obj.options.barSize.width)/100 * parentWidth + 'px';
		
}else {
				bar_width = obj.options.barSize.width;
			}
 
			if(obj.options.barSize.height.indexOf('%')!= -1){
 		bar_height = parseInt(obj.options.barSize.height)/100 * parentHeight + 'px';
		
}else {
				bar_height = obj.options.barSize.height;
			}
 
			return {img_width : img_width, img_height : img_height, bar_width : bar_width, bar_height : bar_height};
 	},
 
 //随机出生点位
 randSet: function() {
 	var rand1 = Math.floor(Math.random()*9+1);
 	var rand2 = Math.floor(Math.random()*9+1);
 	var top = rand1 * parseInt(this.setSize.img_height)/15 + parseInt(this.setSize.img_height) * 0.1;
 	var left = rand2 * parseInt(this.setSize.img_width)/15 + parseInt(this.setSize.img_width) * 0.1;
 
 	this.$element.find('.verify-img-panel').css('margin-bottom', this.options.vSpace + 'px');
 	this.$element.find('.verify-gap').css({'top': top, 'left': left});
  	this.$element.find('.verify-sub-block').css({'top':'-'+(parseInt(this.setSize.img_height)- top + this.options.vSpace + 2)+'px', 'background-image': 'url(images/'+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height,'background-position-y': '-'+top+ 'px', 'background-position-x': '-'+left+'px'});
 },
 
 //刷新
 refresh: function() {
 	this.randSet();
 	this.img_rand = Math.floor(Math.random() * this.options.imgName.length);			//随机的背景图片
  this.$element.find('.verify-img-panel').css({'background': 'url(images/'+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height});
  this.$element.find('.verify-sub-block').css({'background-image': 'url(images/'+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height});
 },
 
 //获取left值
 getLeft: function(node) {
			var left = $(node).offset().left;
//  var nowPos = node.offsetParent;
//
//  while(nowPos != null) {

//  left += $(nowPos).offset().left;　
//  nowPos = nowPos.offsetParent;

//  }
  return left;
 }
 };
 
 //定义Points的构造函数
 var Points = function(ele, opt) {
 this.$element = ele,
 this.defaults = {
 	defaultNum : 4,	//默认的文字数量
		 checkNum : 3,	//校对的文字数量
		 vSpace : 5,	//间隔
 	imgName : ['1.jpg', '2.jpg'],
 	imgSize : {
	 	width: '400px',
	 	height: '200px',
	 },
	 barSize : {
	 	width : '400px',
	 	height : '40px',
	 },
	 ready : function(){},
 	success : function(){},
  error : function(){}
 },
 this.options = $.extend({}, this.defaults, opt)
 };
 
 //定义Points的方法
 Points.prototype = {
 	init : function() {
 
			var _this = this;
 
			//加载页面
 	_this.loadDom();
 
 	_this.refresh();
 	_this.options.ready();
 
 	this.$element[0].onselectstart = document.body.ondrag = function(){
				return false;
			};
 
		 	//点击事件比对
 	_this.$element.find('.verify-img-panel canvas').on('click', function(e) {
 
				_this.checkPosArr.push(_this.getMousePos(this, e));
 
				if(_this.num == _this.options.checkNum) {
 
					_this.num = _this.createPoint(_this.getMousePos(this, e));
					setTimeout(function () {
						var flag = _this.comparePos(_this.fontPos, _this.checkPosArr);
 
						if(flag == false) {	//验证失败
 
							_this.options.error();
							_this.$element.find('.verify-bar-area').css({'color': '#d9534f', 'border-color': '#d9534f'});
						 _this.$element.find('.verify-msg').text('验证失败');
 
							setTimeout(function () {
								_this.$element.find('.verify-bar-area').css({'color': '#000','border-color': '#ddd'});
						 	_this.refresh();
						 }, 400);
 
						}else {	//验证成功
							_this.$element.find('.verify-bar-area').css({'color': '#4cae4c', 'border-color': '#5cb85c'});
							_this.$element.find('.verify-msg').text('验证成功');
							_this.$element.find('.verify-refresh').hide();
							_this.$element.find('.verify-img-panel').unbind('click');
							_this.options.success();
						}
					}, 400);
 
				}
 
				if(_this.num < _this.options.checkNum) {
					_this.num = _this.createPoint(_this.getMousePos(this, e));
				}
 
 	});
 
 	 //刷新
  _this.$element.find('.verify-refresh').on('click', function() {
  	_this.refresh();
  });
 
 	},
 
 
 
 	//加载页面
 	loadDom : function() {
 
 		this.fontPos = [];	//选中的坐标信息
 		this.checkPosArr = [];	//用户点击的坐标
 		this.num = 1;	//点击的记数
 		this.img_rand = Math.floor(Math.random() * this.options.imgName.length);			//随机的背景图片
 
 	var panelHtml = '';
 	var tmpHtml = '';
 
 	this.setSize = Slide.prototype.resetSize(this);	//重新设置宽度高度
 
 	panelHtml += '<div class="verify-img-panel"><div class="verify-refresh" style="z-index:9999"><i class="iconfont icon-refresh"></i></div><canvas width="'+this.setSize.img_width+'" height="'+this.setSize.img_height+'"></canvas></div><div class="verify-bar-area"><span class="verify-msg"></span></div>';
 
 	this.$element.append(panelHtml);
 
 
 	this.htmlDoms = {
 		img_panel : this.$element.find('.verify-img-panel'),
 		bar_area : this.$element.find('.verify-bar-area'),
 		msg : this.$element.find('.verify-msg'),
 	};
 
 		this.htmlDoms.img_panel.css({'width': this.setSize.img_width, 'height': this.setSize.img_height, 'background-size' : this.setSize.img_width + ' '+ this.setSize.img_height, 'margin-bottom': this.options.vSpace + 'px'});
 		this.htmlDoms.bar_area.css({'width': this.options.barSize.width, 'height': this.options.barSize.height, 'line-height':this.options.barSize.height});
 
 	},
 
 	//绘制合成的图片
 	drawImg : function(obj, img) {
 		//准备canvas环境
	 	var canvas = this.$element.find('canvas')[0];
	 	//var canvas=document.getElementById("myCanvas");
	 	var ctx=canvas.getContext("2d");
 
	 	// 绘制图片
	 	ctx.drawImage(img,0,0, parseInt(this.setSize.img_width), parseInt(this.setSize.img_height));
 
	 	// 绘制水印
	 	var fontSizeArr = ['italic small-caps bold 20px microsoft yahei', 'small-caps normal 25px arial', '34px microsoft yahei'];
	 	var fontStr = '天地玄黄宇宙洪荒日月盈昃辰宿列张寒来暑往秋收冬藏闰余成岁律吕调阳云腾致雨露结为霜金生丽水玉出昆冈剑号巨阙珠称夜光果珍李柰菜重芥姜海咸河淡鳞潜羽翔龙师火帝鸟官人皇始制文字乃服衣裳推位让国有虞陶唐吊民伐罪周发殷汤坐朝问道垂拱平章爱育黎首臣伏戎羌遐迩体率宾归王';	//不重复的汉字
 
 
	 	var fontChars = [];
 
	 	var avg = Math.floor(parseInt(this.setSize.img_width)/(parseInt(this.options.defaultNum)+1));
	 	var tmp_index = '';
	 	var color2Num = Math.floor(Math.random() * 5);
 
	 	for(var i = 1; i <= this.options.defaultNum; i++) {
 
	 		fontChars[i-1] = this.getChars(fontStr, fontChars);
 
	 		tmp_index = Math.floor(Math.random()*3);
	 		ctx.font = fontSizeArr[tmp_index];
		 	ctx.fillStyle = _code_color2[color2Num];
 
		 	if(Math.floor(Math.random() * 2) == 1) {
		 		var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) + tmp_index*20 + 20;
		 	}else {
		 		var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) - tmp_index*20;
		 	}
 
		 	ctx.fillText(fontChars[i-1],avg * i, tmp_y);
		 	this.fontPos[i-1] = {'char': fontChars[i-1], 'x': avg * i, 'y': tmp_y};
 
	 	}
 
	 	for(var i = 0; i < (this.options.defaultNum-this.options.checkNum); i++) {
	 		this.shuffle(this.fontPos).pop();
	 	}
 
	 	var msgStr = '';
	 	for(var i = 0; i < this.fontPos.length; i++) {
	 		msgStr += this.fontPos[i].char + ',';
	 	}
 
	 	this.htmlDoms.msg.text('请顺序点击【' + msgStr.substring(0,msgStr.length-1) + '】');
 
	 	return this.fontPos;
 	},
 
 	//获取坐标
 	getMousePos :function(obj, event) {
  var e = event || window.event;
  var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
  var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
  var x = e.clientX - ($(obj).offset().left - $(window).scrollLeft());
 		var y = e.clientY - ($(obj).offset().top - $(window).scrollTop());
 
  return {'x': x, 'y': y};
 	},
 
 	//递归去重
 	getChars : function(fontStr, fontChars) {
 
 		var tmp_rand = parseInt(Math.floor(Math.random() * fontStr.length));
 		if(tmp_rand > 0) {
 			tmp_rand = tmp_rand - 1;
 		}
 
 		tmp_char = fontStr.charAt(tmp_rand);
 		if($.inArray(tmp_char, fontChars) == -1) {
 			return tmp_char;
 		}else {
 			return Points.prototype.getChars(fontStr, fontChars);
 		}
 	},
 
		//洗牌数组
 	shuffle : function(arr) {
			var m = arr.length, i;
			while (m) {
				i = (Math.random() * m--) >>> 0;
				[arr[m], arr[i]] = [arr[i], arr[m]]
			}
			return arr;
		},
 
 	//创建坐标点
 	createPoint : function (pos) {
 		this.htmlDoms.img_panel.append('<div class="point-area" style="background-color:#1abd6c;color:#fff;z-index:9999;width:30px;height:30px;text-align:center;line-height:30px;border-radius: 50%;position:absolute;top:'+parseInt(pos.y-10)+'px;left:'+parseInt(pos.x-10)+'px;">'+this.num+'</div>');
 		return ++this.num;
 	},
 
 	//比对坐标点
 	comparePos : function (fontPos, checkPosArr) {
 
 		var flag = true;
 		for(var i = 0; i < fontPos.length; i++) {
 			if(!(parseInt(checkPosArr[i].x) + 40 > fontPos[i].x && parseInt(checkPosArr[i].x) - 40 < fontPos[i].x && parseInt(checkPosArr[i].y) + 40 > fontPos[i].y && parseInt(checkPosArr[i].y) - 40 < fontPos[i].y)) {
 				flag = false;
 				break;
 			}
 		}
 
 		return flag;
 	},
 
 	//刷新
 refresh: function() {
 	var _this = this;
 	this.$element.find('.point-area').remove();
 	this.fontPos = [];
 	this.checkPosArr = [];
 	this.num = 1;
 
 	this.img_rand = Math.floor(Math.random() * this.options.imgName.length);			//随机的背景图片
 	var img = new Image();
		 img.src = 'images/'+this.options.imgName[this.img_rand];
 
 
		 	// 加载完成开始绘制
		 	$(img).on('load', function(e) {
 		this.fontPos = _this.drawImg(_this, this);
 	});
 
 },
 
 };
 
 //在插件中使用codeVerify对象
 $.fn.codeVerify = function(options, callbacks) {
 var code = new Code(this, options);
 code.init();
 };
 
 //在插件中使用slideVerify对象
 $.fn.slideVerify = function(options, callbacks) {
 var slide = new Slide(this, options);
 slide.init();
 };
 
 //在插件中使用clickVerify对象
 $.fn.pointsVerify = function(options, callbacks) {
 var points = new Points(this, options);
 points.init();
 };
 
})(jQuery, window, document);

到此这篇关于多种类型jQuery网页验证码插件代码实例的文章就介绍到这了,更多相关jQuery网页验证码插件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

多种类型jQuery网页验证码插件代码实例

- Author -

lucky芬

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
基于jQuery实现文字打印动态效果
Apr 21 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
使用jquery实现轮播图效果
Jan 02 #jQuery
jQuery实现全选按钮
Jan 01 #jQuery
jquery自定义组件实例详解
Dec 31 #jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 #jQuery
JS实现选项卡插件的两种写法（jQuery和class）
Dec 30 #jQuery
jQuery实现简单轮播图效果
Dec 27 #jQuery
原生jQuery实现只显示年份下拉框
Dec 24 #jQuery
Android Studio(4) Dijkstra(1) seata(1) Flask Web(1) MyBatis(5) 三角函数(1) cv2(1) exec(1) nacos(1) 迪杰斯特拉(1)
You might like
windows xp下安装pear
2006/12/02 PHP
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
微信小程序-小说阅读小程序实例（demo）
2017/01/12 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
js获取url页面id，也就是最后的数字文件名
2020/09/25 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python使用socket远程连接错误处理方法
2015/04/29 Python
浅析Python基础-流程控制
2016/03/18 Python
Python 类的继承实例详解
2017/03/25 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
详解程序意外中断自动重启shell脚本（以Python为例）
2019/07/26 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
小学毕业感言300字
2014/02/19 职场文书
农村婚礼主持词
2014/03/13 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书