jQuery鼠标拖拽滑块验证插件

使用方法

1.引入必要文件

<link rel="stylesheet" type="text/css" href="css/dragverify.css"/>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/dragverify.js"></script>

2.HTML上使用,此处列举部分代码

<div id="dragverify"></div>

3.实现

(function($){
    $.fn.dragverify = function(params){
        var x ;
        var dragverify = this;
        var moveFlag = false;
        var defaults = {};
        var params = $.extend(defaults,params);
        var htmls = '<div class="dragverifybg"></div><div class="dragverifytext" onselectstart="return false;" unselectable="on">拖动滑块验证</div><div class="block blockbg"></div>';

        this.append(htmls);

        var block = dragverify.find(".block");
        var dragverifybg = dragverify.find(".dragverifybg");
        var drafverifytext = dragverify.find(".dragverifytext");
        var maxWidth = dragverify.width() - block.width();
        block.mousedown(function(e){
            moveFlag = true;
            x = e.pageX - parseInt(block.css("left"),10);

        });

        $(document).mousemove(function(e){
            var moveX = e.pageX - x;
            if(moveFlag){
                if(moveX > 0 && moveX < maxWidth){
                    block.css({"left":moveX});
                    dragverifybg.css({"width":moveX});
                }else if(moveX > maxWidth){
                    verifySuc();
                }
            }
        }).mouseup(function(e){
            moveFlag = false;
            var mX = e.pageX - x;
            if(mX < maxWidth){
                block.css({"left":0});
                dragverifybg.css({"width":0});
            }
        });
        function verifySuc(){
            block.removeClass("blockbg").addClass("blockbgsuc");
            drafverifytext.text("验证通过");
            dragverify.css({"color":"#ffffff"});
            block.unbind("mousedown");
            $(document).unbind("mousemove");
            $(document).unbind("mouseup");
        }

    }
})(jQuery);

//usedemo

$("#dragverify").dragverify();
更新时间 2020-05-20 17:31:52,本资源已通过Awesomes审核检验,请放心使用!
如下载遇到问题,请联系客服解决
下载地址
此插件下载需要0A币,请登录后进行下载。
请文明评论,与人为善,比聪明更重要!
评论