js 滑块登录验证

在用户登录界面，好多时候需要验证码，但是用验证码又过于繁琐，所以最近关注了下滑块验证这个东西。

首先html中写入滑块样式,当然css样式就不需要贴了，看心情想弄个什么鬼样子的，随便弄

<div class="sliderBox">
     <div id="slider" class="slider" style="padding: 0 5px">                 
     </div>
</div>

写入js文件，

$("#slider").slider({
         400, // width
        height: 40, // height
        sliderBg: "rgba(230,245,188)", // 滑块背景颜色
        color: "black", // 文字颜色
        fontSize: 14, // 文字大小
        bgColor: "rgba(78,226,153,0.40)", // 背景颜色
        textMsg: "请按住滑块，拖动到最右边", // 提示文字
        successMsg: "验证通过", // 验证成功提示文字
        successColor: "black", // 滑块验证成功提示文字颜色
        time: 400, // 返回时间
        callback: function(result) {if(result){
　　　　　　　　　　//你想干啥
                })
            }
            // 回调函数，true(成功),false(失败)
        }
    });

当然需要引入一个js文件了，这是基于jq的，所以要在jq后面写入它们。

/* jQuery, window, document */
(function(t, i, s) {
    var l = function(i, s) {
        this.ele = i;
        this.defaults = {
             300,
            height: 34,
            sliderBg: "#e8e8e8",
            color: "#666",
            fontSize: 12,
            bgColor: "#7ac23c",
            textMsg: "请按住滑块，拖动到最右边",
            successMsg: "验证成功",
            successColor: "#fff",
            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;
            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({
                 t.opts.width,
                height: t.opts.height,
                backgroundColor: t.opts.sliderBg
            });
            this.sliderBtn.css({
                 t.opts.height,
                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({
                 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)
            })

            $('.ui-slider-btn').get(0).addEventListener('touchstart',function(i){
                if(t.result) {
                    return
                }
                t.slidertouchstart(i)
            })
        },
        slidertouchstart: function(t){
            var i = this;
            var s = t.touches[0].clientX;
            var e = s - this.sliderBtn.offset().left;
            i.slidertouchmove(s, e);
            i.slidertouchup()
        },
        slidertouchmove: function(i,e){
            var l = this;
            $('.ui-slider-btn').get(0).addEventListener('touchmove',function(t){
                if(l.result) return;
                window.getSelection().removeAllRanges();
                l.sliderBtn_left = t.touches[0].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)
            })
        },
        slidertouchup: function(){
            var i = this;
            $('.ui-slider-btn').get(0).addEventListener('touchend',function(t){
                if(i.sliderBtn_left != i.maxLeft) {
                    i.sliderBtn_left = 0
                } 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({
                     i.sliderBtn_left
                }, i.opts.time);
                $('.ui-slider-btn').get(0).ontouchmove = null;
                if(i.opts.callback && typeof i.opts.callback === "function") {
                    i.opts.callback(i.result)
                }
            })
        },
        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) {
                window.getSelection().removeAllRanges();
                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
                } 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({
                     i.sliderBtn_left
                }, i.opts.time);
                t(this).off("mousemove.slider mouseup.slider");
                if(i.opts.callback && typeof i.opts.callback === "function") {
                    i.opts.callback(i.result)
                }
            })
        }
    };

    t.fn.extend({
        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]()
                }
            })
        }
    })
    /*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);

完毕！