拖拉式验证码, 行为验证码， java登录验证码
验证码文件：
链接： https://pan.baidu.com/s/14-ZT4rUVIhhIkl-y6sH9wQ
https://pan.baidu.com/s/1jxVBZDVladcSEFbYJ5fyZw 密码：ae7x
效果图
拖拉式验证码
1. 项目导入 js与css文件，单独放个文件中
2. 将js文件 drag.js 代码全部粘到login.jsp中
3. 修改js代码, 红色为添加的代码
var flag110 = false; // 设置判断是否验证标识
(function($){
$.fn.drag = function(options){
var x, drag = this, isMove = false, defaults = {
};
var options = $.extend(defaults, options);
//添加背景，文字，滑块
var html = '<div class="drag_bg"></div>'+
'<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>'+
'<div class="handler handler_bg"></div>';
this.append(html);
var handler = drag.find('.handler');
var drag_bg = drag.find('.drag_bg');
var text = drag.find('.drag_text');
var maxWidth = drag.width() - handler.width(); //能滑动的最大间距
//鼠标按下时候的x轴的位置
handler.mousedown(function(e){
isMove = true;
x = e.pageX - parseInt(handler.css('left'), 10);
});
//鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
$(document).mousemove(function(e){
var _x = e.pageX - x;
if(isMove){
if(_x > 0 && _x <= maxWidth){
handler.css({'left': _x});
drag_bg.css({'width': _x});
}else if(_x > maxWidth){ //鼠标指针移动距离达到最大时清空事件
dragOk();
}
}
}).mouseup(function(e){
var _x = e.pageX - x;
if(_x < maxWidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
handler.css({'left': 0});
drag_bg.css({'width': 0});
}
isMove = true;
});
//清空事件
function dragOk(){
handler.removeClass('handler_bg').addClass('handler_ok_bg');
text.text('验证通过');
drag.css({'color': '#fff'});
handler.unbind('mousedown');
$(document).unbind('mousemove');
$(document).unbind('mouseup');
flag110 = true; // 验证成功后改变标志
}
};
})(jQuery);
4. 添加拖拉式验证码标签
<li><div id="drag"></li> // 拖动图标
<script type="text/javascript">
$('#drag').drag();
</script>
5. 判断是否验证成功
<form onsubmit="return check();" action="" method="post">
function check(){
// 判断是否验证
if (flag110==false) {
title_ts("验证失败！");
password.focus();
return false;
}
return true;
}
6. 具体修改请参照项目本身， 个人解决方案，不喜勿喷， 本人新手首次发帖，还请大家多多关照
7. 修改后如果不生效， 可能是js版本冲突， 将引入标签放置最上面， 避免当前js覆盖原本的js