1、首先添加jq第三方库和jquery.slideunlock.js插件
jquery.slideunlock
css样式：
#slider {
margin : 0自动；
width: 235px；
高： 40px；
position: relative；
border-radius: 2px；
背景色： # dae2d 0；
Overflow :隐藏；
文本对齐3360中心；
用户- select : none；
-moz-user-select: none；
-webkit-user-select: none；
}
#slider_bg {
位置： absolute；
left: 0；
top: 0；
height: 100%；
背景色： #7AC 23c；
z-index: 1；
}
#标签{
width: 46px；
位置： absolute；
left: 0；
top: 0；
高： 38px；
line-height: 38px；
border : 1px固态# ccccc；
后台： # FFf；
z-index: 3；
cursor: move；
color: #ff9e77；
font-size: 16px；
字体权重： 900；
}
#labelTip {
位置： absolute；
left: 0；
width: 100%；
height: 100%；
font-size: 13px；
字体- family : ' microsoftyahei '，serif；
color: #787878；
line-height: 38px；
文本对齐3360中心；
z-index: 2；
}
html:
拖动滑块进行验证
放在上面的话效果如下。
2、调用这个插件
var slider=newsliderunlock (' # slider '，{
successLabelTip :“验证成功”
、function ()、function ) )。
//成功
)；
slider.init (；
3、看效果：
向最右边滑动时验证成功
使用方法：
幻灯片成功时，id为labelTip的文本已成功验证。 你可以在这个变化中使用这个功能
if(labeltip=='验证成功') ) ) ) ) ) ) ) ) )。
登录确认(检查帐户，param )；
} else {
popstatus(2，)先行幻灯片验证)、1、)、true )；
}
LoginConfirmationAction (； 的含义是认证成功时调用登录api的函数；
popstatus(2，“请先在幻灯片上验证”，1，'，true )是一个自定义框，表示用户验证失败，无法调用函数。
转载时请注明出处和相应链接。 正文永久地址： https://blog.yayu anzi.com/21264.html
通过微信获得奖项
在支付宝(Alipay )获奖
感谢作者对Liam的奖励。 我们会更加努力的！ 如果你想成为作者，请点击我