效果图
淘宝或者阿里云上经常能看到鼠标拖动的验证码出现
阿里云验证码
一直想自己实现，今天整理了下网上资料，找到了QapTcha这个插件，或者说一个模板。今天就用他来实现一个简单的拖动验证码。
废话不多说，上代码：
工程结构
主页面(核心代码)
...
<body>
<div class="container">
<h1>高仿淘宝拖动验证码</h1>
<form method="post" action="#">
<fieldset>
<div id="QapTcha" class="QapTcha"></div>
<input type="submit" name="submit" value="提交表单" />
</fieldset>
</form>
</div>
...
<script type="text/javascript">
$(document).ready(function () {
$('.QapTcha').QapTcha({ disabledSubmit: true,autoSubmit:false, autoRevert: true, txtLock: "请按住滑块，拖动到最右侧", txtUnlock: '验证通过', PHPfile: 'QapTcha.jquery.php' });
});
</script>
</body>
</html>
Qaptcha脚本
jQuery.QapTcha = {
build: function(options) {
var defaults = {
txtLock: '已上锁 :表单不能提交，请拖动上方箭头到最右侧解锁',//未解锁文字
txtUnlock: '已解锁锁 : 表单能提交',//解锁成功文字
disabledSubmit: true,//未解锁提交按钮无效
autoRevert: true,//是否自动回弹
PHPfile: 'php/Qaptcha.jquery.php',//验证服务器
autoSubmit: false//是否自动提交
};
if (this.length > 0) return jQuery(this).each(function(i) {
var opts = $.extend(defaults, options),
t = $(this),
form = $('form').has(t),
Clr = jQuery('<div>', {
'class': 'clr'
}),
bgSlider = jQuery('<div>', {
'class': 'bgSlider'
}),
bgMasks = jQuery('<div>', {
'class': 'bgMasks'
}),
Slider = jQuery('<div>', {
'class': 'Slider'
}),
Icons = jQuery('<div>', {
id: 'Icons'
}),
TxtStatus = jQuery('<div>', {
'class': ' TxtStatus dropError TxtStatusFont',
text: opts.txtLock
});
if (opts.disabledSubmit) form.find('input[type=\'submit\']').attr('disabled', 'disabled');
//美化拖动验证，模仿淘宝
bgSlider.appendTo(t);//添加验证背景
Icons.insertAfter(bgSlider);
Clr.insertAfter(Icons);
Slider.appendTo(bgSlider);//添加滑块
bgMasks.appendTo(bgSlider);//添加上层遮罩
TxtStatus.appendTo(bgSlider);//添加文字
t.show();
Slider.draggable({//滑块添加滑动
drag: function(event, ui) {//拖动回调
$(bgMasks).width(bgSlider.width() - ui.position.left)
},
revert: function(event, ui) {//验证回弹
if (opts.autoRevert) {
if (parseInt(Slider.css("left")) > (bgSlider.width() - Slider.width() - 3)) return false;
else return true
}
},
revertDuration: 15,
containment: bgSlider,
axis: 'x',//横向
stop: function(event, ui) {//推动结束回调
if (ui.position.left > (bgSlider.width() - Slider.width() - 3)) {
$.ajax({//拖动到头给服务器发消息
type: "post",
async: "async",
data: {
action: 'qaptcha',
},
url: opts.PHPfile,
dataType: "json",
success: function(data) {
if (!data.error) {
Slider.draggable('disable').css('cursor', 'default');
TxtStatus.text(opts.txtUnlock).addClass('dropSuccess').removeClass('dropError');
Slider.addClass('SliderSuccess');
Icons.css('background-position', '-16px 0');
form.find('input[type=\'submit\']').removeAttr('disabled');//提交按钮可用
if (opts.autoSubmit) form.find('input[type=\'submit\']').trigger('click');
} else {
alert(data.error);
refurbishValidate(t);
}
},
beforeSend: function() {//提交前设置加载图标
var htmLoading = '<span>加载中...</span><div class="loader"><div class="ball-spin-fade-loader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>';
TxtStatus.html(htmLoading).addClass('dropSuccess').removeClass('dropError')
},
complete: function(XMLHttpRequest, textStatus) {
isAjaxing = false;
$("#btn_loading").css('display', 'none')
},
error: function(e) {
alert('验证失败');
refurbishValidate(t);
}
});
} else {
while (bgMasks.width() <= bgSlider.width()) {
$(bgMasks).width(bgMasks.width() + Slider.width())
}
$(bgMasks).width(bgMasks.width() - Slider.width())
}
}
});
})
}
};
jQuery.fn.QapTcha = jQuery.QapTcha.build;
function refurbishValidate(ctrl) {//重置表单
ctrl.html("");
ctrl.QapTcha({
disabledSubmit: true,
autoSubmit: false,
autoRevert: true,
txtLock: "请按住滑块，拖动到最右侧",
txtUnlock: '验证通过',
PHPfile: 'Qaptcha.jquery.php'
})
}
//服务端验证
<?php
session_start();
$aResponse['error'] = false;
if(isset($_POST['action']))
{
if(htmlentities($_POST['action'], ENT_QUOTES, 'UTF-8') == 'qaptcha')#确认是qaptcha发送的action
{
//这里可以进一步对参数分析以验证正确性
echo json_encode($aResponse);
}
else
{
$aResponse['error'] = true;
echo json_encode($aResponse);
}
}
else
{
$aResponse['error'] = true;
echo json_encode($aResponse);
}
只是对模板的一个简单应用，后台并没有做复杂验证，阿里云的验证要比这个复杂的多，后天可以大致判断是否是人操作。
这里没有加这类判断，只加了滚动，有兴趣的朋友可以自己加入自己的验证逻辑！
