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>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery.js" type="text/javascript"></script>
<script src="javascript.js" type="text/javascript"></script>
</head>
<body>

<div id="header">
  <h1>Sliding Panel</h1>
  <br />
  <h2>jQuery Sliding Panel Demonstration for NETTUTS</h2>
</div>

  <hr id="header_stripe"/>
  <div id="page_container">
  <div id="toppanel">
    <div id="panel">
      <div id="panel_contents"> </div>
      <h1>Animated Top Panel</h1>
      <h2> By Connor for Nettuts</h2>
      <img class="border_pic" src="images/tutsplus.jpg" alt="Screenshot" />
      <div class="border" id="login">
        <p>Username:
          <input type="text" size="15" name="username" id="username" />
          <br />
          Password:
          <input type="password" size="15" name="password" id="password" />
          <br />
          <input type="button" accesskey="l" id="login_btn" name="login" value="Login" />
        </p>
      </div>
    </div>
    <div class="panel_button" style="display: visible;"><img src="images/expand.png"  alt="expand"/> <a href="#">Login Here</a> </div>
    <div class="panel_button" id="hide_button" style="display: none;"><img src="images/collapse.png" alt="collapse" /> <a href="#">Hide</a> </div>
  </div>
  <div id="content">
    <p>Click the Top Panel button for more content. You can put anything you want in the panel. It is great for making content accessible on every page, but not take up the space usually required.</p>
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent scelerisque commodo massa. Ut volutpat. Maecenas luctus augue quis velit. Nulla tincidunt pede in erat. Vivamus tellus. Maecenas lacinia, arcu sed scelerisque posuere, dui massa gravida enim, a vehicula erat quam et risus. Etiam scelerisque. Vivamus et ipsum. Nulla facilisi. Nullam elementum fringilla enim. Nulla facilisi. Praesent sem arcu, porttitor ac, cursus sed, fringilla vitae, nisi. Nam sollicitudin eros id ante. Nunc nisi augue, lobortis a, rhoncus quis, gravida nec, tortor. Sed sollicitudin. Nulla facilisi.</p>
  </div>
  <div id="footer">
    <p>Tutorial created by Connor for Nettuts</p>
  </div>
</div>
</body>
</html>

JS代码(javascript.js):

$(document).ready(function(){
	$("div.panel_button").click(function(){
	$("div#panel").animate({
	height:"500px"}
).animate({
	height:"400px"}
,"fast");
	$("div.panel_button").toggle();
}
);
	$("div#hide_button").click(function(){
	$("div#panel").animate({
	height:"0px"}
,"fast");
}
);
}
);

CSS代码(style.css):

body{background:#202020;text-align:center;margin:0px;}
#page_container{position:relative;margin-left:auto;margin-right:auto;width:904px;top:-32px;}
#header{margin-left:auto;margin-right:auto;width:100%;height:135px;background:#3f3f3f url(images/header.png) no-repeat center;position:relative;border-bottom:1px solid #4a4a4a;}
#header h1{display:none;font-family:Arial,Helvetica,sans-serif;font-weight:bold;position:relative;top:30px;font-size:40px;color:white;}
#header h2{display:none;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:16px;color:#7e7e7e;}
hr#header_stripe{height:12px;position:relative;top:-7px;background-color:#191919;border:none;color:#191919;}
.panel_button{margin-left:auto;margin-right:auto;position:relative;top:1px;width:173px;height:54px;background:url(images/panel_button.png);z-index:20;filter:alpha(opacity=70);-moz-opacity:0.70;-khtml-opacity:0.70;opacity:0.70;cursor:pointer;}
.panel_button img{position:relative;top:10px;border:none;}
.panel_button a{text-decoration:none;color:#545454;font-size:20px;font-weight:bold;position:relative;top:5px;left:10px;font-family:Arial,Helvetica,sans-serif;}
.panel_button a:hover{color:#999999;}
#wrapper{margin-left:auto;margin-right:auto;width:900px;text-align:center;}
#toppanel{position:absolute;width:900px;left:0px;z-index:25;text-align:center;}
#panel{width:900px;position:relative;top:1px;height:0px;margin-left:auto;margin-right:auto;z-index:10;overflow:hidden;text-align:left;}
#panel_contents{background:black;filter:alpha(opacity=70);-moz-opacity:0.70;-khtml-opacity:0.70;opacity:0.70;height:100%;width:904px;position:absolute;z-index:-1;}
#panel h1{text-align:center;font-family:Geneva,Arial,Helvetica,sans-serif;color:white;font-weight:normal;line-height:35px;left:275px;position:absolute;top:10px;}
#panel h2{text-align:center;font-family:Geneva,Arial,Helvetica,sans-serif;color:#447c6f;line-height:25px;font-size:16px;position:absolute;top:60px;left:350px;}
#content{margin-left:auto;margin-right:auto;width:600px;position:relative;top:90px;text-align:left;color:#545454;font-family:Arial,Helvetica,sans-serif;font-size:12px;padding-bottom:30px;}
.border{border:15px #1d1d1d solid;}
img.border{float:left;margin-right:15px;margin-bottom:8px;}
img.border_pic{border:15px #1d1d1d solid;position:absolute;top:110px;float:left;margin-left:150px;width:250px;height:150px;z-index:30;}
div#login{width:240px;height:150px;position:absolute;right:150px;top:110px;background:#46392f;text-align:left;padding-left:10px;}
div#login p{color:#CCCCCC;font-family:Century Gothic,Georgia,"Times New Roman",Times,serif;line-height:25px;}
div#login input#password{position:relative;right:-6px;}
div#login input#login_btn{border:1px #899690 solid;cursor:pointer;position:relative;top:30px;left:86px;}
#footer p{font-family:Arial,Helvetica,sans-serif;position:relative;top:60px;font-size:13px;color:#333333;}

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