利用jQuery实现按住拖动滑块验证登录



18 71 24



特效描述:利用jQuery实现 按住拖动 滑块验证登录,利用jQuery实现按住拖动滑块验证登录

代码结构

1. 引入JS

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

2. HTML代码

<!--实例1-->
<div class="verify-wrap" id="verify-wrap"></div>
<div style="text-align: center;">
	<button type="button" id="resetBtn" style="display: inline-block;">重置1</button>
	<button type="button" id="getState" style="display: inline-block;">获取1验证状态</button>
</div>
	<br />
	<br />
	<br />
	<br />
	<br />
<!--实例2-->
<div class="verify-wrap" id="verify-wrap2"></div>
<div style="text-align: center;">
	<button type="button" id="resetBtn2" style="display: inline-block;">重置2</button>
	<button type="button" id="getState2" style="display: inline-block;">获取2验证状态</button>
</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();//可以重置 插件 回到初始状态 
		})
		$("#getState").on('click',function(){
			alert(slideVerify.slideFinishState);   //这个可以拿到 当前验证状态  是否完成
		})
		var slideVerify2 = new SlideVerifyPlug('#verify-wrap2',{
			wrapWidth:'300',
			initText:'请按住滑块',
			sucessText:'验证通过',
		});
		$("#resetBtn2").on('click',function(){
			slideVerify2.resetVerify();
		})
		$("#getState2").on('click',function(){
			alert(slideVerify2.slideFinishState);
		})
	})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 切换按钮 表单 表单美化 表单插件 表单美化插件 提示框/弹出层 文本框 text文本框 按钮控制 表单验证 表单验证插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到