jQuery按住滑块拖动验证插件

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，操作更方便哦