最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2016-07-19 07:17浏览(4272)

本文中的拖动验证码是参照淘宝的登录验证码来仿造的,如何判断是否拖动成功,只要看#drag背景颜色是否更改即可。当然这个只是表面的验证,最后是结合ajax+cookie来验证。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery超级简单的绿色拖动验证码功能
分类:表单代码 > 验证码 难易:中级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

拖动区域

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

    //清空事件
    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');
    }
};
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/897.html
评论12
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 11楼
    03-19 10:39
    花一样的少年
    手机上可以用吗?
  • 头像 10楼
    01-29 09:55
    stayblank
    手机浏览器用不了
  • 头像 9楼
    01-25 08:16
    ngu137
    不错 学习啦。。。。
  • 头像 8楼
    11-30 11:32
    钻石王老四
    下载了 还好
  • 头像 7楼
    11-23 09:46
    longshao
    收藏一下,吧
  • 头像 6楼
    09-18 14:11
    celsius
    可以用吗?这个插件
  • 头像 5楼
    09-11 11:31
    2106001700
    攒积分攒积分,么哦毛病的
  • 头像 4楼
    09-06 16:39
    CherishLychee
    这个不错,方便实用
  • 头像 3楼
    05-27 17:37
    dilimic
    怎么将滑动的结果返回呢?
  • 头像 板凳
    03-21 14:40
    mushuihan
    这个 有点简单 实用吗?<br />
1 2