<!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 Login by 25175</title>
<meta name="Design Corp" content="顺通网络" />
<meta name="Author" content="powered by 25175">
<meta name="description" content="jQuery Login,25175-你我一起舞-教育资源信息整合"/>
<meta name="Keywords" content="jQuery Login" />
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
<!--
.login {
background-color: #9CF;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
top: 0px;
width:50px;
position: absolute;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 50px;
text-align: center;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
color: #333;
padding: 10px;
}
.login-form input {
background-color: #eee;
border: 1px solid #333;
color: #333;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.login a {
display: block;
}
.login-form a {
font-size: 10px;
text-decoration: none;
color: #333;
font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".login-form").hide();
$('#login-link').toggle(
function()
{
$('.login-form').slideDown(1000);
$('.login').animate({
width:'200'
}, 1000);
},
function()
{
$('.login-form').slideUp(1000);
$('.login').animate({
width: "50"
}, 1000);
});
});
</script>
</head>
<body bgcolor="#eeeeee">
<div class="login">
<div class = "login-form">
<form id="form1" name="form1" method="post" action="">
<p>
<label>
Uname<br />
<input type="text" name="textfield" id="textfield" />
</label>
<br />
Pword<br />
<label>
<input type="text" name="textfield2" id="textfield2" />
</label>
<br />
<label><br />
<input type="submit" name="button" id="button" value="Login" />
</label>
</p>
<a href="#">Forgot password ?</a>
</form>
</div>
<a id="login-link" href="#"><img src="login.png" width="48" height="48" border="0" /></a>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
More script and css style
: <a href="http://www.25175.com" target="_blank" title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library">25175</a>
</body>
</html>