网站顶部隐藏伸缩登陆框，用户用鼠标点击登陆按钮后才下拉弹出显示，关闭后隐藏起来，常用的登陆框隐藏特效哦。
<!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=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>可显示隐藏的顶部伸缩登陆表单_武鸣人</title>
<style type="text/css">
html, body {border: 0; margin: 0; padding: 0;}
body {
font: 85%/0.9 arial, helvetica, sans-serif;
line-height: 130%;
width: 100%;
min-width: 970px;
}
a {
color: #0099CC;
text-decoration: none;
}
a:hover {
color: #00CCFF;
}
a img {
border: none;/*remove border for linked images*/
}
/***** clear *****/
.clear {
clear: both;
height: 0;
line-height: 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/***** Main Layout ****/
#container {
width: 100%;
height: 100%;
text-align: center;/* IE fix to center the page */
}
#content {
width: 900px;
margin: 0 auto;/* center the page in Firefox */
text-align: left;
padding: 20px;
}
/* Login Panel */
#top {
background: url(/img/20240304_www_wuming_ren_20.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: 80%;
text-align: center;
background: url(/img/20240304_www_wuming_ren_21.jpg) no-repeat right 0;
padding-right: 45px;
}
#top ul.login li.left {
background: url(/img/20240304_www_wuming_ren_22.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(/img/20240304_www_wuming_ren_23.jpg) repeat-x 0 0;
}
#top ul.login li a {
color: #33CCCC;
}
#top ul.login li a:hover {
color: white;
}
/*Login*/
/* toggle effect - show/hide 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 .login_wuming_ren {
width: 550px;
height: 80px;
margin: 0 auto;
padding-top: 25px;
text-align: left;
font-size: 0.85em;
}
#login .login_wuming_ren .left {
width: 120px;
float: left;
padding-left: 65px;
font-size: 0.95em;
}
#login .login_wuming_ren .right {
width: 290px;
float: right;
text-align: right;
padding-right: 65px;
font-size: 0.95em;
}
#login .login_wuming_ren form {
margin: 0 0 10px 0;
height: 26px;
}
#login .login_wuming_ren input.field {
border: 1px #1A1A1A solid;
background: #464646;
margin-right: 5px;
margin-top: 4px;
color: white;
height: 16px;
}
#login .login_wuming_ren input:focus.field {
background: #545454;
}
#login .login_wuming_ren input.rememberme {
border: none;
background: transparent;
margin: 0;
padding: 0;
}
#login .login_wuming_ren input.button_login {
width: 47px;
height: 20px;
cursor: pointer;
border: none;
background: transparent url(/img/20240304_www_wuming_ren_24.jpg) no-repeat 0 0;
}
#login .loginClose {
display: block;
position: absolute;
right: 15px;
top: 10px;
width: 70px;
font-size: 0.8em;
text-align: left;
}
#login .loginClose a {
display: block;
width: 100%;
height: 20px;
background: url(/img/20240304_www_wuming_ren_25.jpg) no-repeat right 0;
padding-right: 10px;
border: none;
font-size: 0.9em;
color: white;
}
#login .loginClose a:hover {
background: url(/img/20240304_www_wuming_ren_25.jpg) no-repeat right -20px;
}
</style>
<script src="/img/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script language="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();
});
$("#www_wuming_ren").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="login_wuming_ren">
<form action="#" method="post">
<label for="log"><b>Username: </b></label>
<input class="field" type="text" name="log" id="log" value="" size="23">
<label for="pwd"><b>Password: </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"> Remember me</label></div>
<div class="right">Not a member? <a href="#">Register</a> | <a href="#">Lost your password?</a></div>
</div>
<div class="loginClose"><a href="#" id="www_wuming_ren">Close Panel</a></div>
</div>
</div>
<div id="container">
<div id="top">
<ul class="login">
<li class="left"> </li>
<li>Hello Guest!</li>
<li>|</li>
<li><a id="toggleLogin" href="#">Log In</a></li>
</ul>
</div>
<div class="clearfix"></div>
<div class="clearfix"></div>
</div>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件，请刷新页面后看效果！
</body>
</html>本文来自武鸣人网站，转载请注明出处