<!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" xml:lang="en" lang="en">
<head>
<title>jquery显示隐藏层插件实例登录框的演示</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="style.css教程" type="text/css" media="screen" />
<link rel="stylesheet" href="fx.slide.css" type="text/css" media="screen" />
<script src="/jquery-1.2.6.pack.js" type="text/网页特效"></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();
});
$("#closelogin").click(function(){
$("#login").parent("div").animate({ height : 0 } , 500 );
$("#login").animate({margintop : -105 } , 520 );
});
})
</script></head>
<body>
<!-- login -->
<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>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="closelogin">close panel</a></div>
</div>
</div>
<!-- /login --><div id="container">
<div id="top">
<!-- login -->
<ul class="login">
<li class="left"> </li>
<li>hello guest!</li>
<li>|</li>
<li><a id="togglelogin" href="#">log in</a></li>
</ul> <!-- / login -->
</div> <!-- / top --><div class="clearfix"></div>
</body>
</html>
源码下载地址
http://down.111cn.net/down/code/jquery/2010/0908/20689.html