一、作用
我们在登录网站的时候一般会让我们滑动认证或者是验证码认证，这个主要是可以防止恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试，实际上是现在很多网站通行的方式，验证防止你是机器人（程序），属于安全验证，和验证码差不多，又比验证码方便。
二、实现
html页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.slider.min.js"></script>
<style type="text/css">
body,
div {
margin: 0;
padding: 0;
}
.ui-slider-wrap {
background: #e8e8e8;
position: relative;
}
.ui-slider-wrap .ui-slider-bg {
width: 0;
}
.ui-slider-wrap .ui-slider-btn {
position: absolute;
top: 0;
left: 0;
cursor: move;
text-align: center;
border: 1px solid #ccc;
background: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.ui-slider-wrap .ui-slider-btn {
background: #fff url(../img/slider.png) no-repeat center;
}
.ui-slider-wrap .ui-slider-btn.success {
background-image: url(../img/success.png);
}
.ui-slider-wrap .ui-slider-text {
width: 100%;
height: 100%;
font-family: "微软雅黑";
text-align: center;
position: absolute;
top: 0;
left: 0;
color: #666;
}
.ui-slider-wrap .ui-slider-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div class="container">
<div class="demo1">
<div id="slider1" class="slider"></div>
<div class="result">验证结果：<span id="result1"></span></div>
</div>
</div>
<script type="text/javascript">
$("#slider1").slider({
callback: function(result) {
$("#result1").text(result);
}
});
$("#reset1").click(function() {
$("#slider1").slider("restore");
});
</script>
</body>
</html>
我这里把js点击事件也放进去了还有css样式也没有分开写。
jquery-3.3.1.min.js这个文件就是jquery的迷你版。
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",
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({
width: t.opts.width,
height: t.opts.height,
backgroundColor: t.opts.sliderBg
});
this.sliderBtn.css({
width: 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({
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
} 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);
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);
三、运行效果
滑动前：
滑动后：
四、注意
jquery.slider.min.js的引入要在jquery-3.3.1.min.js引入的下方，不然会报错，提示一些效果无效。
还有就是
这个图片里面第一个是滑动之前的图片，第二个是成功后的图片，我这里没有图片。你们在练习的时候可以随意引入两张图片看下效果。
最后一个就是引入的文件路径一定不要出错，特别是js文件。
