1、head引入js文件
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/resources/basic/js/app/slideVerify.js"></script>
2、body引入HTML代码
<div class="lc-drag">
<div class="verify-wrap" style="height: 36px" id="verify-wrap">
</div>
</div>
3、css
/** 注册滑块滑动 **/
.lc-drag{
height: 36px;
border-radius:5px;
}
.verify-wrap{
border-radius:5px;
background-color:#e8e8e8;
border:none
}
.verify-wrap .fix-tips{
color:#aaa;
font-size:1.8rem;
}
.verify-wrap .fix-tips, .verify-msg{
font-size:16px;
}
.verify-wrap .drag-btn{
top: 0!important;
width: 10rem;
height: 36px;
background:#fff url("../../img/slideVerify/code.png") no-repeat center center;
border: 1px solid #cacaca;
border-radius: 5px;
}
.verify-wrap{
height: 36px!important;
}
.verify-wrap .fix-tips, .verify-msg {
line-height: 36px!important;
}
.verify-wrap .drag-progress {
display: none;
}
4、提交的时候进行验证判断
<input class="u-btn u-btn-w200 f-mr20" type="button" id="subBtn" onclick="return validateSlider()" value="提交">
5、编写js
<script>
var slideResult=false;
var config = {anim:6,tips: [3, '#d81e06'],time:1500};
$(function(){
var SlideVerifyPlug = window.slideVerifyPlug;
var slideVerify = new SlideVerifyPlug('#verify-wrap', {
// wrapWidth:'350',//设置 容器的宽度 ,不设置的话,会设置成100%,需要自己在外层包层div,设置宽度,这是为了适应方便点;
initText: '请向右滑动滑块', //设置 初始的 显示文字
sucessText: '验证通过',//设置 验证通过 显示的文字
getSuccessState: function (res) {
//当验证完成的时候 会 返回 res 值 true,只留了这个应该够用了
slideResult = res;
if (slideResult) {
}
if (slideVerify.slideFinishState) {
$('.value').html(slideVerify.slideFinishState);
}
}
});
});
function validateSlider(){
if(!slideResult){
layer.tips("请先完成滑块验证!", $("#verify-wrap"),config);
return false;
}
}
</script>
6、引入slideVerify.js 和 layer.js 分别是
链接:https://pan.baidu.com/s/1ADI2MrFIBcBnNftOm0BhAQ
提取码:cn4s
复制这段内容后打开百度网盘手机App,操作更方便哦
链接:https://pan.baidu.com/s/1muqgSyfYBy3PTqWcFXesdQ
提取码:t3xm
复制这段内容后打开百度网盘手机App,操作更方便哦
图片链接:
链接:https://pan.baidu.com/s/1bTJbUPjlgxqgx98Rh_AA3A
提取码:k1zg
复制这段内容后打开百度网盘手机App,操作更方便哦