jQuery滑动解锁登录表单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery滑动解锁登录表单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery滑动解锁登录表单代码</title>
<!-- jQuery -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" media="screen" href="css/bootstrap.min.css">
<!-- jQuery ui -->
<link href="css/jquery-ui-1.10.4.min.css" rel="stylesheet" media="screen">
<script src="js/jquery-ui-1.10.4.min.js"></script>

<!-- SliderLock -->
<link href="css/style.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/sliderlock.js"></script>

</head>
<body>

<div class="container login" style="width: 970px!important;">

	<div class="rom">
		<div class="col-xs-8 login-box">
			<h4>用户登陆</h4>
			<form class="form-horizontal" role="form" method="post" action="#">
				<div class="form-group">
					<label for="sliderLock" class="col-xs-2 control-label">解锁验证</label>
					<div class="col-xs-7">
						<div id="slider" class="sliderLock">
							<p>Slide to Unlock</p>
						</div>
						<label class="control-label helplable" for="sliderLock">用鼠标点击箭头向右滑动解锁</label>
					</div>
				</div>
				<div class="form-group">
					<label for="login-name" class="col-xs-2 control-label">登陆名称</label>
					<div class="col-xs-7">
						<input type="text" name="login-name" class="form-control" id="login-name" placeholder="登陆名称">
						<label class="control-label helplable" for="login-name">注册时填写的名称或者电子邮件</label>
					</div>
				</div>
				<div class="form-group">
					<label for="login-pass" class="col-xs-2 control-label">登陆密码</label>
					<div class="col-xs-7">
						<input type="password" name="login-pass" class="form-control" id="login-pass" placeholder="登陆密码">
						<label class="control-label helplable" for="login-pass">注册时填写的名称,忘记密码 <a href="#">点此找回</a></label>
					</div>
				</div>
				<div class="form-group">
					<label for="login-verify" class="col-xs-2 control-label">验证码</label>
					<div class="col-xs-4">
						<input type="text" name="login-verify" class="form-control" id="login-verify" placeholder="不需要输入验证码">
						<label class="control-label helplable" for="login-verify">点击验证码将会刷新</label>
					</div>
					<div class="col-xs-3">
						<p class="form-control-static" style="padding: 0">不再需要的验证码</p>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-offset-2 col-xs-4">
						<button type="submit" class="btn btn-primary btn-block">登 陆</button>
					</div>
				</div>
			</form>
		</div>
		<div class="col-xs-4 login-help">
			<p>还没有注册过？<a href="#">点此注册</a></p>
		</div>
	</div>
</div>
</body>
</html>

JS代码(sliderlock.js):

$(document).ready(function(){
	$(":input").attr("disabled","disabled");
}
);
	function refreshSwatch(){
	$SliderValue=$('#slider').slider( "value" );
	if($SliderValue==100){
	$('#slider').slider( "value",86 );
	$(":input").removeAttr("disabled");
	$("#slider").unbind();
}
}
$(function(){
	$("#slider").slider({
	change:refreshSwatch}
);
	// 涓婇潰璇寸殑浣犺鏄洿鎺ヤ娇鐢ㄥ畼鏂圭殑ui js 鏂囦欢,瑕佸姞鍏ヤ互浠ｇ爜// $("#slider").html('<span class="glyphicon glyphicon-arrow-right"></span>');
}
);

CSS代码(style.css):

@charset "utf-8";body{padding-top:100px;}
.login{border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
.login{padding-top:15px;padding-bottom:15px;border:#c0c0c0 1px solid;}
.login .login-box{border-right:#c0c0c0 1px solid;}
#slider{height:35px;position:relative;padding-left:40px;}
#slider p{top:7px;left:100px;color:#aaa;position:absolute;}
#slider a{top:2px;height:29px;width:40px;margin-left:2px;font-size:20px;padding-left:8px;}

附件:下载该文件资源,减少时间成本(增值服务)