1、首先添加jq第三方库和jquery.slideunlock.js插件
jquery.slideunlock
css样式：
#slider {
margin: 0 auto;
width: 235px;
height: 40px;
position: relative;
border-radius: 2px;
background-color: #dae2d0;
overflow: hidden;
text-align: center;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
#slider_bg {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: #7AC23C;
z-index: 1;
}
#label {
width: 46px;
position: absolute;
left: 0;
top: 0;
height: 38px;
line-height: 38px;
border: 1px solid #cccccc;
background: #fff;
z-index: 3;
cursor: move;
color: #ff9e77;
font-size: 16px;
font-weight: 900;
}
#labelTip {
position: absolute;
left: 0;
width: 100%;
height: 100%;
font-size: 13px;
font-family: 'Microsoft Yahei', serif;
color: #787878;
line-height: 38px;
text-align: center;
z-index: 2;
}
html:
>> 拖动滑块验证
放上去之后效果如图：
2、调用此插件
var slider = new SliderUnlock("#slider",{
successLabelTip : "验证成功"
},function(){
// 成功
});
slider.init();
3、看效果：
当滑动到最右侧时验证成功
用法：
当滑动成功时，id为 labelTip 的text变成了验证成功，我们可以通过这个变化来使用这个功能，
if (labelTip == '验证成功') {
LoginConfirmationAction(checkAccount, param);
} else {
popStatus(2, '请先通过滑动验证', 1,'', true);
}
LoginConfirmationAction();的意思是当验证成功时调用登录api的一个函数；
popStatus(2, '请先通过滑动验证', 1,'', true)是一个自定义弹框，提示用户未通过验证，无法调用函数；
转载时请注明出处及相应链接，本文永久地址：/21264.html
微信打赏
支付宝打赏
感谢您对作者Liam的打赏，我们会更加努力！如果您想成为作者，请点我
如果觉得《html登陆滑动验证 js实现登录时的滑动验证【原创】》对你有帮助，请点赞、收藏，并留下你的观点哦！
