jQuery按住滑塊拖動驗證插件

jQuery滑塊插件，鼠標按住滑塊拖動到最右邊，滑塊驗證插件代碼。

使用方法：

1、head引入js文件

<script src="js/jquery.min.js"></script>
<script src="js/jq-slideVerify.js" type="text/javascript" charset="utf-8"></script>

2、body引入HTML代碼

<div class="verify-wrap" id="verify-wrap"></div>

<script type="text/javascript">
	$(function(){
		console.log(parseFloat('1px'))
		
		var SlideVerifyPlug = window.slideVerifyPlug;
		var slideVerify = new SlideVerifyPlug('#verify-wrap',{
			wrapWidth:'450',//設置 容器的寬度 ，默認為 350 ，也可不用設，你自己css 定義好也可以，插件里面會取一次這個 容器的寬度
			initText:'請按住滑塊，123',  //設置  初始的 顯示文字
			sucessText:'驗證通過最右邊最右邊最右邊',//設置 驗證通過 顯示的文字
			getSucessState:function(res){
				//當驗證完成的時候 會 返回 res 值 true，只留了這個應該夠用了 
				console.log(res);
			}
		});
		$("#resetBtn").on('click',function(){
			slideVerify.resetVerify();//可以重置 插件 回到初始狀態(tài) 
		})
		$("#getState").on('click',function(){
			alert(slideVerify.slideFinishState);   //這個可以拿到 當前驗證狀態(tài)  是否完成
		})
	})
</script>

使用聲明

1. 本站所有素材（未指定商用），僅限學習交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權，著作權歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權，請勿用于商業(yè)用途，會員不得以任何形式發(fā)布、傳播、復制、轉售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統(tǒng)商業(yè)用途請預先授權。

查看演示下載資源

530 13913 29