jQuery按住滑塊拖動驗證插件

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

使用方法：

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',//設(shè)置 容器的寬度 ，默認(rèn)為 350 ，也可不用設(shè)，你自己css 定義好也可以，插件里面會取一次這個 容器的寬度
			initText:'請按住滑塊，123',  //設(shè)置  初始的 顯示文字
			sucessText:'驗證通過最右邊最右邊最右邊',//設(shè)置 驗證通過 顯示的文字
			getSucessState:function(res){
				//當(dāng)驗證完成的時候 會 返回 res 值 true，只留了這個應(yīng)該夠用了 
				console.log(res);
			}
		});
		$("#resetBtn").on('click',function(){
			slideVerify.resetVerify();//可以重置 插件 回到初始狀態(tài) 
		})
		$("#getState").on('click',function(){
			alert(slideVerify.slideFinishState);   //這個可以拿到 當(dāng)前驗證狀態(tài)  是否完成
		})
	})
</script>

使用聲明

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

查看演示下載資源

533 14472 29