滑动的验证码
程序员文章站
2022-05-13 14:59:56
...
<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>上一篇： 一篇小区的增删改查