Search for
Login | Username Password Forgot? | Email: | Create Account
Non English | Popularity: 0 | Entries: 63 | Updated: 1h ago | | Add to My Feeds

在网上看到个挺个性的jQuery验证码，传送门：http://www.gobwas.com/bcaptcha，于是就把它整到了WordPress里面了，但是那个需要引入jQueryUI，总体积比较大，于是抽空用它的素材自己写了一个简单版的，效果可见本博客底部发表评论处。

以下是JS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

jQuery(function($){
	$.extend({
		iNeekeCaptcha: function(o){
			if(!o){
				return;
			}
			//字母组
			var letterArray = 'abcdefghijklmnopqrstuvwxyz1234567890';
			//是否在移动
			var isMoving = false;
			//是否移动完毕
			var isMoved = false;
			//拖动的字母的边框大小
			var letter = {};
			//验证码边框大小
			var area = {};
			//提示信息
			var captchaTip = '';
			//被拖动的字母
			var codeWord = 'i';
			//右侧的字母组
			var codeZone = 'neeke';
			//表单ID
			var formId = 'commentform';
			var html = '<div id="captcha">';
			if(o.captchaTip){
				captchaTip = o.captchaTip;
			}
			if(o.codeWord){
				codeWord = o.codeWord;
			}
			if(o.codeZone){
				codeZone = o.codeZone;
			}
			if(o.formId){
				formId = o.formId;
			}
			$(':submit').attr('disabled', 'disabled');
			//转为小写
			codeWord = codeWord.toLowerCase();
			codeZone = codeZone.toLowerCase();
			captchaTip = captchaTip.replace('%code_word%', codeWord.toUpperCase());
 
			html += '<div id="captcha_tip">' + captchaTip + '</div>';
			html += '<div id="captcha_zone" style="float: left;"><div class="captcha_left"></div><div id="captcha_letter_container"><div id="captcha_letter_wrap">';
			for(var i = 0; i < codeWord.length; i++){
				html += '<div id="captcha_letter" class="zone_letter" style="cursor: pointer; background-position: '+(-18 * letterArray.indexOf(codeWord.charAt(i)))+'px 0; z-index: 100; position: relative;"></div>';
			}
			html += '</div><div class="captcha_shadow"></div></div><div class="captcha_white"><div id="baskets"><div id="basket"></div><div id="captcha_letters" style="height: 24px; float: left;"><div class="zone_dot"></div>';
			for(var j = 0; j < codeZone.length; j++){
				html += '<div class="zone_letter" style="background-position: '+(-18 * letterArray.indexOf(codeZone.charAt(j)))+'px 0;"></div>';
			};
			html += '</div></div></div><div class="captcha_right"></div><div style="clear: both;"></div></div><div style="clear: both;"></div></div>';
			$('#' + formId).before(html);
			//计算字母边框及验证码边框大小
			letter.left = $('#captcha_letter').offset().left;
			letter.top = $('#captcha_letter').offset().top;
			letter.width = $('#captcha_letter').outerWidth();
			letter.height = $('#captcha_letter').outerHeight();
 
			area.left = $('#captcha_zone').offset().left;
			area.right = $('#captcha_zone').offset().left + $('#captcha_zone').outerWidth();
			area.top = $('#captcha_zone').offset().top;
			area.bottom = $('#captcha_zone').offset().top + $('#captcha_zone').outerHeight();
 
			//按下字母开始拖拽
			$('#captcha_letter').mousedown(function(e){
				e.preventDefault();
				if(!isMoved){
					isMoving = true;
					$(document.body).css('cursor', 'pointer');
				}
			});
 
			//字母跟随鼠标移动
			$(document).mousemove(function(e){
				if(isMoving){
					var x = e.pageX;
					var y = e.pageY;
					//不允许拖出框外
					x = x < area.left ? area.left : x;
					y = y < area.top ? area.top : y;
					x = x > (area.right -letter.width) ? (area.right -letter.width) : x;
					y = y > (area.bottom - letter.height) ? (area.bottom - letter.height) : y;
					x = x - letter.left;
					y = y - letter.top;
 
					//字母的边框大小
					var ll = x + letter.left;
					var lt = y + letter.top;
					var lr = ll + letter.width;
					var lb = lt + letter.height;
 
					//待填入的方框大小
					var bt = $('#basket').offset().top;
					var bl = $('#basket').offset().left;
					var br = bl + $('#basket').outerWidth();
					var bb = bt + $('#basket').outerHeight() ;
 
					//字母是否进入
					if(lr >= bl && ll <= br && lt <= bb && lb >= bt){
						$('#basket').append($('#captcha_letter').css({top: 0, left: 0, cursor: 'auto'}));
						$('#captcha_letter_container').children().fadeOut('slow');
						$(document.body).css('cursor', 'auto');
						$(':submit').attr('disabled', '');
						isMoving = false;
						isMoved = true;
					}else{
						$('#captcha_letter').css({top: y, left: x});
					}
				}
			});
 
			//鼠标抬起时字母回到原始位置
			$(document).mouseup(function(e){
				if(isMoving){
					isMoving = false;
					$('#captcha_letter').css({top: 0, left: 0, position: 'relative'});
					$(document.body).css('cursor', 'auto');
				}
			});
 
			//鼠标抬起时字母回到原始位置
			$('#captcha_letter').mouseup(function(e){
				e.stopPropagation();
				isMoving = false;
				$('#captcha_letter').css({top: 0, left: 0, position: 'relative'});
				$(document.body).css('cursor', 'auto');
			});
		}
	});
});

以下是CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

.zone_letter{
	background: url("images/letters_grey.png") no-repeat scroll 0 0 transparent;
	height: 24px;
	width: 18px;
	float: left;
}
#captcha{
	margin: 10px 0;
	margin: 10px;
}
#captcha_tip{
	color: red;
	text-align: left;
}
#captcha_letter_container{
	background: url('images/blue_back.png') repeat-x scroll 0 0 transparent;
	height: 78px;
	float: left;
	position: relative;
	z-index: 2;
}
#captcha_letter_wrap{
	margin: 26px 15px 26px 0;
	width: 18px;
	float: left;
}
#captcha_letter{
	background: url('images/letters_black.png') repeat-x scroll 0 0 transparent;
}
#basket{
	border: 1px dotted #DEDEDE;
	float: left;
	height: 24px;
	width: 20px;
}
#baskets{
	margin: 26px 10px;
	float: left;
	z-index: 2;
}
.captcha_left{
	background: url('images/left.png') no-repeat scroll 0 0 transparent;
	height: 78px;
	width: 15px;
	float: left;
}
.captcha_white{
	background: url('images/white_back.png') repeat-x scroll 0 0 transparent;
	height: 78px;
	position: relative;
	z-index: 1;
	padding-left: 10px;
	float: left;
}
.captcha_right{
	background: url('images/right.png') no-repeat scroll 0 0 transparent;
	height: 78px;
	width: 4px;
	float: left;
}
.captcha_shadow{
	background: url('images/shadow.png') repeat-y scroll 0 0 transparent;
	float: left;
	height: 76px;
	position: absolute;
	right: 0;
	top: 1px;
	width: 15px;
}
.zone_dot{
	background: url('images/dot.png') no-repeat scroll 0 0 transparent;
	float: left;
	height: 24px;
	margin-right: -4px;
	width: 12px;
	z-index: 10;
}

调用方法：

1
2
3
4
5
6
7
8

$(function(){
	$.iNeekeCaptcha({
		codeWord: 'i',
		codeZone: 'neeke',
		captchaTip: '请拖动左边的字母"%code_word%"至右边的方框中提交评论！',
		formId: 'commentform'
	});
})

我觉着我这代码是不是还可以再精简，功能上还可再增强，有空了再继续折腾，先这样搁这。
遇到的一些问题这里也记录一下：
1.火狐下拖拽过程中鼠标会不停闪烁（切换于指针与小手之间）
解决方法：拖拽时修改body的cursor为pointer，拖拽完成之后再修改为auto。
2.IE下拖拽时偶尔会出现图像被拖出的现象（不太好描述）
解决方法：鼠标按下时用一下event的preventDefault()即可。
3.IE下拖拽时出现原位置被拖蓝的
解决方法：给出现拖蓝现象的元素的样式增加“float:left”（不知道什么原因，就是这么神奇的解决了。）

您可能也喜欢：

Jsp验证码
微软正版验证
AJAX验证用户名
ASP.NET中5种数据验证控件
软件测试技术 验证和确认
无觅


More from Neeke's Blog

收拾东西回家 11 Mar 28
女朋友过生日 11 Mar 2
博客下雪吧 11 Mar 2

^ Back To Top