jQuery按住滑塊拖動(dòng)驗(yàn)證插件

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

使用方法：

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

使用聲明

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

查看演示下載資源

532 14202 29