滑动的验证码

最新推荐文章于 2024-08-13 15:11:04 发布

Renkx0404

最新推荐文章于 2024-08-13 15:11:04 发布

阅读量645

点赞数 1

本文链接：https://blog.csdn.net/Renkx0404/article/details/78677736

版权

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/jquery.slider.css" />
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery.slider.min.js"></script>
    <style>
        button {
            display: inline-block;
            padding: 6px 12px;
            line-height: 1.4;
            text-align: center;
            border: 1px solid transparent;
            border-radius: 4px;
            color: #fff;
            background-color: #5bc0de;
            border-color: #46b8da;
            cursor: pointer;
            font-size: 15px;
        }
        .demo{
            width: 48%;
            height: 100%;
            padding: 20px;
            border: 1px dashed #fff;
            border-radius: 4px;
            box-sizing: border-box;
            position: relative;
        }
    </style>
</head>

<body>
        <div class="demo">
            <div class="btns">
                <button id="reset2">还原</button>
            </div>
            <div id="slider2" class="slider"></div>
        </div>
    <script>
        $("#slider2").slider({
            width: 340, // width
            height: 60, // height
            sliderBg: "rgb(134, 134, 131)", // 滑块背景颜色
            color: "#fff", // 文字颜色
            fontSize: 14, // 文字大小
            bgColor: "#33CC00", // 背景颜色
            textMsg: "按住滑块，拖拽验证", // 提示文字
            successMsg: "验证通过了哦", // 验证成功提示文字
            successColor: "red", // 滑块验证成功提示文字颜色
            time: 400, // 返回时间
            callback: function(result) { // 回调函数，true(成功),false(失败)
                $("#result2").text(result);
            }
        });

        // 还原
        $("#reset2").click(function() {
            $("#slider2").slider("restore");
        });
    </script>
</body>

    <script src="js/jquery.slider.min.js">
    (function(t,i,s,e)
    {var l=function(i,s){
    this.ele=i;
    this.defaults={
    width:300,
    height:34,
    sliderBg:"#e8e8e8",
    color:"#666",
    fontSize:12,
    bgColor:"#7ac23c",
    textMsg:"请按住滑块，拖动到最右边",
    successMsg:"验证成功",successColor:"#fff",
    falseMsg:"验证失败",falseColor:"red",
    time:160,
    callback:function(t){

    }
    };
    this.opts=t.extend({

    },this.defaults,s);
    this.init()
    };
    l.prototype={
    init:function(){

    this.result=false;
    this.sliderBtn_left=0;
    this.maxLeft=this.opts.width-this.opts.height-6;
    this.render();
    this.eventBind()
    },
    render:function(){
    var t='<div class="ui-slider-wrap">'+'<div class="ui-slider-text ui-slider-no-select">'+this.opts.textMsg+"</div>"+'<div class="ui-slider-btn init ui-slider-no-select"></div>'+'<div class="ui-slider-bg"></div>'+"</div>";
    this.ele.html(t);this.initStatus()
    },
    initStatus:function(){
    var t=this;
    var i=this.ele;
    this.slider=i.find(".ui-slider-wrap");
    this.sliderBtn=i.find(".ui-slider-btn");
    this.bgColor=i.find(".ui-slider-bg");
    this.sliderText=i.find(".ui-slider-text");
    this.slider.css({
    width:t.opts.width,
    height:t.opts.height,
    backgroundColor:t.opts.sliderBg});
    this.sliderBtn.css({
    width:t.opts.height+6+"px",
    height:t.opts.height,
    lineHeight:t.opts.height+"px"
    });
    this.bgColor.css({
    height:t.opts.height,
    backgroundColor:t.opts.bgColor
    });
    this.sliderText.css({
    lineHeight:t.opts.height+"px",
    fontSize:t.opts.fontSize,color:t.opts.color
    })
    },
    restore:function(){
    var t=this;
    var i=t.opts.time;
    this.result=false;
    this.initStatus();
    this.sliderBtn.removeClass("success").animate({
    left:0
    },i);
    this.bgColor.animate({
    width:0
    },i,function(){
    t.sliderText.text(t.opts.textMsg)
    })
    },
    eventBind:function(){
    var t=this;
    this.ele.on("mousedown",".ui-slider-btn",
    function(i){
    if(t.result){
    return
    }t.sliderMousedown(i)
    })
    },
    sliderMousedown:function(t){
    var i=this;
    var s=t.clientX;
    var e=s-this.sliderBtn.offset().left;
    i.sliderMousemove(s,e);
    i.sliderMouseup()
    },
    sliderMousemove:function(i,e){
    var l=this;
    t(s).on("mousemove.slider",
    function(t){
    l.sliderBtn_left=t.clientX-i-e;
    if(l.sliderBtn_left<0){
    return
    }if(l.sliderBtn_left>l.maxLeft){
    l.sliderBtn_left=l.maxLeft
    }l.sliderBtn.css("left",l.sliderBtn_left);
    l.bgColor.width(l.sliderBtn_left)
    })
    },
    sliderMouseup:function(){
    var i=this;
    t(s).on("mouseup.slider",
    function(){
    if(i.sliderBtn_left!=i.maxLeft){
    i.sliderBtn_left=0
    i.ele.find(".ui-slider-text").text(i.opts.falseMsg).css({color:i.opts.falseColor});
    }else{
    i.ele.find(".ui-slider-text").text(i.opts.successMsg).css({color:i.opts.successColor
    });
    i.ele.find(".ui-slider-btn").addClass("success");
    i.result=true
    }i.sliderBtn.animate({
        left:i.sliderBtn_left
    },i.opts.time);
    i.bgColor.animate({
        width:i.sliderBtn_left
    },i.opts.time);i.opts.callback
    t(this).off("mousemove.slider mouseup.slider");
    if(i.opts.callback&&typeof i.opts.callback==="function"){
        i.opts.callback(i.result)
    }
    })
    }
    };
    t.fn.slider=function(i){
    return this.each(function(){
    var s=t(this);
    var e=s.data("slider");
    if(!e){
    e=new l(s,i);s.data("slider",e)
    }if(typeof i==="string"){e[i]()}})}})(jQuery,window,document);
    </script>