jQuery顶部滑动下拉登录框js代码

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

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

以下是 jQuery顶部滑动下拉登录框js代码的示例演示效果:

当前平台(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>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* container */
#container{width:100%;height:100%;text-align:center;}
</style>

<link rel="stylesheet" href="login.css" type="text/css" />

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
   $("#toggleLogin").toggle(function(){
		$("#login").parent("div").animate({ height : 105 } , 520 );
		$("#login").animate({marginTop : 0 } , 500 );
		$(this).blur();
   },function(){
		$("#login").parent("div").animate({ height : 0 } , 500 );
		$("#login").animate({marginTop : -105 } , 520 ); 
		$(this).blur();
   });
   $("#closeLogin").click(function(){
		$("#login").parent("div").animate({ height : 0 } , 500 );
		$("#login").animate({marginTop : -105 } , 520 ); 
   });
})
</script>

</head>

<body>

	<div style="margin:0px;overflow:hidden;position:relative;height:0px;">
		<div id="login" style="margin:-105px 0px 0px;height:auto;">
			<div class="loginContent">
				<form action="#" method="post">
					<label for="log"><b>用户名: </b></label>
					<input class="field" type="text" name="log" id="log" value="" size="23" />
					<label for="pwd"><b>密码:</b></label>
					<input class="field" type="password" name="pwd" id="pwd" size="23" />
					<input type="submit" name="submit" value="" class="button_login" />
					<input type="hidden" name="redirect_to" value=""/>
				</form>
				<div class="left"><label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" />保持登录</label></div>
				<div class="right">还不会员? <a href="#">注册</a> | <a href="#">忘记密码?</a></div>
			</div>
			<div class="loginClose"><a href="#" id="closeLogin">关闭</a></div>
		</div> 
	</div> 
    <div id="top">
		<ul class="login">
			<li class="left">&nbsp;</li>
			<li>您好 管理员！</li>
			<li>|</li>
			<li><a id="toggleLogin" href="#">登录</a></li>
		</ul>
	</div>
</body>
</html>

CSS代码(login.css):

@charset "utf-8";/* top */
#top{background:url(images/login_top.jpg) repeat-x 0 0;height:38px;position:relative;}
#top ul.login{display:block;position:relative;float:right;clear:right;height:38px;width:auto;font-weight:bold;line-height:38px;margin:0;right:150px;color:white;font-size:12px;text-align:center;background:url(images/login_r.jpg) no-repeat right 0;padding-right:45px;}
#top ul.login li.left{background:url(images/login_l.jpg) no-repeat left 0;height:38px;width:45px;padding:0;margin:0;display:block;float:left;}
#top ul.login li{text-align:left;padding:0 6px;display:block;float:left;height:38px;background:url(images/login_m.jpg) repeat-x 0 0;}
#top ul.login li a{color:#33CCCC;}
#top ul.login li a:hover{color:white;}
/* login */
#login{width:100%;color:white;background:#1E1E1E;overflow:hidden;position:relative;z-index:3;height:0;}
#login a{text-decoration:none;color:#33CCCC;}
#login a:hover{color:white;}
#login .loginContent{width:550px;height:80px;margin:0 auto;padding-top:25px;text-align:left;}
#login .loginContent .left{width:120px;float:left;padding-left:65px;}
#login .loginContent .right{width:290px;float:right;text-align:right;padding-right:65px;}
#login .loginContent form{margin:0 0 10px 0;height:26px;}
#login .loginContent input.field{border:1px #1A1A1A solid;background:#464646;margin-right:5px;margin-top:4px;color:white;height:16px;}
#login .loginContent input:focus.field{background:#545454;}
#login .loginContent input.rememberme{border:none;background:transparent;margin:0;padding:0;}
#login .loginContent input.button_login{width:47px;height:20px;cursor:pointer;border:none;background:transparent url(images/button_login.jpg) no-repeat 0 0;}
#login .loginClose{display:block;position:absolute;right:15px;top:10px;width:43px;text-align:left;}
#login .loginClose a{display:block;width:100%;height:20px;background:url(images/button_close.jpg) no-repeat right 0;padding-right:10px;border:none;color:white;}
#login .loginClose a:hover{background:url(images/button_close.jpg) no-repeat right -20px;}

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