jQuery实现的可隐藏,显示的登陆框
点击login显示登录的输入框，可以点击关闭按钮关闭
<!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" />
<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.3.1.min.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();
});
$("#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>
<br><br>
</body>
</html>
完整代码
http://www.corange.cn//uploadfiles/example11_11529.rar
原文地址:http://www.corange.cn/archives/2010/04/3615.html