近几年比较流行的一种验证方式就是拖动验证，可以在一定程度上避免过去验证码被破解的尴尬，下面小编就为大家分享一下这个验证方式的js代码

$.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){

isMove=false;

var _x=e.pageX - x;

if(_x < maxWidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置

handler.css({'left': 0});

drag_bg.css({'width': 0});

}

});

handler.ontouchstart(function(e){

isMove=true;

x=e.pageX - parseInt(handler.css('left'), 10);

});

//鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离

$(document).ontouchmove(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();

}

}

}).ontouchend(function(e){

isMove=false;

var _x=e.pageX - x;

if(_x < maxWidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置

handler.css({'left': 0});

drag_bg.css({'width': 0});

}

});

//清空事件

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');

}

};

喜欢就订阅关注我吧，小编不定期分享前端的各种小知识哦