在用户登录界面，好多时候需要验证码，但是用验证码又过于繁琐，所以最近关注了下滑块验证这个东西，可以用js来实现滑块登录的个功能。
首先html中写入滑块样式,当然css样式就不需要贴了，看心情想弄个什么鬼样子的，随便弄
<div class="sliderBox">
<div id="slider" class="slider" style="padding: 0 5px">
</div>
</div>
写入js文件，
$"#slider").slider{
width: 400, // width
height: 40, // height
sliderBg: "rgba230,245,188)", // 滑块背景颜色
color: "black", // 文字颜色
fontSize: 14, // 文字大小
bgColor: "rgba78,226,153,0.40)", // 背景颜色
textMsg: "请按住滑块，拖动到最右边", // 提示文字
successMsg: "验证通过", // 验证成功提示文字
successColor: "black", // 滑块验证成功提示文字颜色
time: 400, // 返回时间
callback: functionresult) {ifresult){
//你想干啥
})
}
// 回调函数，true成功),false失败)
}
});
当然需要引入一个js文件了，这是基于jq的，所以要在jq后面写入它们。
/* jQuery, window, document */
functiont, i, s) {
var l = functioni, 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: functiont) {}
};
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.htmlt);
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.textt.opts.textMsg)
})
},
eventBind: function) {
var t = this;
this.ele.on"mousedown", ".ui-slider-btn", functioni) {
ift.result) {
return
}
t.sliderMousedowni)
})
$'.ui-slider-btn').get0).addEventListener'touchstart',functioni){
ift.result) {
return
}
t.slidertouchstarti)
})
},
slidertouchstart: functiont){
var i = this;
var s = t.touches[0].clientX;
var e = s - this.sliderBtn.offset).left;
i.slidertouchmoves, e);
i.slidertouchup)
},
slidertouchmove: functioni,e){
var l = this;
$'.ui-slider-btn').get0).addEventListener'touchmove',functiont){
ifl.result) return;
window.getSelection).removeAllRanges);
l.sliderBtn_left = t.touches[0].clientX - i - e;
ifl.sliderBtn_left < 0) {
return
}
ifl.sliderBtn_left > l.maxLeft) {
l.sliderBtn_left = l.maxLeft
}
l.sliderBtn.css"left", l.sliderBtn_left);
l.bgColor.widthl.sliderBtn_left)
})
},
slidertouchup: function){
var i = this;
$'.ui-slider-btn').get0).addEventListener'touchend',functiont){
ifi.sliderBtn_left != i.maxLeft) {
i.sliderBtn_left = 0
} else {
i.ele.find".ui-slider-text").texti.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);
$'.ui-slider-btn').get0).ontouchmove = null;
ifi.opts.callback && typeof i.opts.callback === "function") {
i.opts.callbacki.result)
}
})
},
sliderMousedown: functiont) {
var i = this;
var s = t.clientX;
var e = s - this.sliderBtn.offset).left;
i.sliderMousemoves, e);
i.sliderMouseup)
},
sliderMousemove: functioni, e) {
var l = this;
ts).on"mousemove.slider", functiont) {
window.getSelection).removeAllRanges);
l.sliderBtn_left = t.clientX - i - e;
ifl.sliderBtn_left < 0) {
return
}
ifl.sliderBtn_left > l.maxLeft) {
l.sliderBtn_left = l.maxLeft
}
l.sliderBtn.css"left", l.sliderBtn_left);
l.bgColor.widthl.sliderBtn_left)
})
},
sliderMouseup: function) {
var i = this;
ts).on"mouseup.slider", function) {
ifi.sliderBtn_left != i.maxLeft) {
i.sliderBtn_left = 0
} else {
i.ele.find".ui-slider-text").texti.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);
tthis).off"mousemove.slider mouseup.slider");
ifi.opts.callback && typeof i.opts.callback === "function") {
i.opts.callbacki.result)
}
})
}
};
t.fn.extend{
slider : functioni) {
return this.eachfunction) {
var s = tthis);
var e = s.data"slider");
if!e) {
e = new ls, i);
s.data"slider", e)
}
iftypeof i === "string") {
e[i])
}
})
}
})
/*t.fn.slider = functioni) {
return this.eachfunction) {
var s = tthis);
var e = s.data"slider");
if!e) {
e = new ls, i);
s.data"slider", e)
}
iftypeof i === "string") {
e[i])
}
})
}*/
})jQuery, window, document);
完毕！
相关推荐：
js插件实现图片滑动验证码实例分享
jquery实现pc端滑动验证
以上就是Javascript如何实现滑块登录的验证的详细内容，更多请关注风君子博客其它相关文章！