头像

jQuery超级简单的绿色拖动验证码功能

来源:http://www.sucaihuo.com/js/897.html 素材火管理员 2016-07-19 07:17浏览(2193) 收藏

本文中的拖动验证码是参照淘宝的登录验证码来仿造的,如何判断是否拖动成功,只要看#drag背景颜色是否更改即可。当然这个只是表面的验证,最后是结合ajax+cookie来验证。
jQuery超级简单的绿色拖动验证码功能
分类:表单代码 > 验证码 难易:中级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 30 下载资源 下载积分: 106 积分

拖动区域

<div id="drag"></div>

引入拖动插件

<script src="js/drag.js" type="text/javascript"></script>

生成绿色的拖动验证码

$('#drag').drag();

拖动验证码滑动插件写法:

$.fn.drag = function(options) {
    var x, drag = this, isMove = false, defaults = {
    };
    var options = $.extend(defaults, options);
    //添加背景,文字,滑块
    var html = '
' + '
拖动滑块验证
' + '
'; 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}); } }); //清空事件 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'); } };
评论67
头像

友情提示:垃圾评论一律封号...

  • 头像 66楼
    前天 02-23 04:22
    k134563
    非常简单的
  • 头像 65楼
    02-15 10:57
    seigelions
    页面上的显示效果还是不错的
  • 头像 64楼
    01-10 10:42
    liqingsong
    不错,非常简单的一个东西
  • 头像 63楼
    01-10 10:36
    liqingsong
    谁能提供一下drag.js
  • 头像 62楼
    01-08 17:48
    18317893390
    希望楼主多发这样好的东西
  • 头像 61楼
    12-25 10:33
    147369a
    拖得太快出现问题,如何解决?.
  • 头像 60楼
    12-22 20:32
    ppschina
    积分高了点呀
  • 头像 59楼
    12-15 15:20
    ccj803
    验证码效果不错
  • 头像 58楼
    12-06 19:49
    taykey
    好象没有PHP的文件。。。
  • 头像 57楼
    12-04 12:12
    cheerpeng
    很酷的验证码效果啊
1 2