<!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>Sliding Login Panel with jQuery 1.3.2</title>
<meta name="description" content="Demo of a Sliding Login Panel using jQuery 1.3.2" />
<meta name="keywords" content="jquery, sliding, toggle, slideUp, slideDown, login, login form, register" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- stylesheets -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slide.css" type="text/css" media="screen" />
<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
<script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
<![endif]-->
<!-- jQuery - the core -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- Sliding effect -->
<script src="js/slide.js" type="text/javascript"></script>
</head>
<body>
<!-- Login -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>Welcome to Web-Kreation</h1>
<h2>Sliding login panel Demo with jQuery</h2>
<p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
<h2>Download</h2>
<p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article »</a></p>
</div>
<div class="left">
<form class="clearfix" action="#" method="post">
<h1 class="padlock">Member Login</h1>
<label class="grey" for="log">Username:</label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label class="grey" for="pwd">Password:</label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
<a class="lost-pwd" href="#">Lost your password?</a>
</form>
</div>
<div class="left right">
<form action="#" method="post">
<h1>Not a member yet? Sign Up!</h1>
<label class="grey" for="signup">Username:</label>
<input class="field" type="text" name="signup" id="signup" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<label>A password will be e-mailed to you.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</form>
</div>
</div>
</div> <!-- /login -->
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Hello Guest!</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Log In | Register</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
</div> <!--panel -->
<div id="container">
<div id="content" style="padding-top:100px;">
<h1>Web-Kreation Demos</h1>
<h2>Sliding login panel with jQuery - Demo</h2>
<p>This script is based on my previous script "<a href="http://web-kreation.com/demos/login_form_mootools_1.2/" title="">Show/Hide Login Panel with Mootools 1.2</a>" but now works with jQuery 1.3.2 instead of Mootools 1.2.</p>
<p class="highlight">Click "<strong>Log In | Register</strong>" on top to open the demo. Download this script <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">here »</a></p>
<p class="highlight">Please note the Login and Register forms in this demo <strong>will not work "out of the box"</strong> without a user login system pre-installed on your site (e.g. PHP/MySQL user login system)! However, most of the CMS such as Joomla, Drupal, Wordpress, etc have a login system integrated in their platform. So if you are using one, read their documentation to see how you could implement this script into your CMS.</p>
<p>This page is valid <a href="http://validator.w3.org/check?uri=referer">(X)HTML</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" target="blank" rel="nofollow" title="Valid HTML">CSS</a>.</p>
<h2>What's new in this version?</h2>
<ul>
<li>Panel has been redesigned to be "slicker".</li>
<li>Panel overlaps content instead of "pushing" it.</li>
<li>Images are transparent... and work in IE6! (Thanks to <b>24Ways</b> for their <a href="http://24ways.org/2007/supersleight-transparent-png-in-ie6" target="blank" rel="nofollow" title="Transparent PNGs in Internet Explorer 6">IE PNG Fix</a>.) This means, you can change the background color of the body as you wish or even set a background image.</li>
<li>Login button that slides the panel down changes from "Log In | Register" to "Close Panel" on click and I have added some nice rollover images:</li>
</ul>
<h2>Known Bugs</h2>
<ul>
<li>Rollover effect for the login button doesn't work in IE6 because of <b>24Ways'</b> script. Knowing alpha transparency works perfectly in this browser I think we can disregard that minor bug. </li>
</ul>
<h2>And now some Lorem Ipsum to fill the page</h2>
<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>
<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><!-- / content -->
</div><!-- / container -->
</body>
</html>
jquery实现的动画隐藏登陆框(效果很酷)
5星 · 超过95%的资源 需积分: 9 181 浏览量
2010-05-31
11:17:11
上传
评论
收藏 59KB RAR 举报 
jquery实现的动画隐藏登陆框(效果很酷).rar （18个子文件） 
css 
slide.css 4KB style.css 1KB images 
tab_m.png 261B bt_open.png 2KB bt_close.png 2KB tab_b.png 232B tab_r.png 1KB tab_l.png 1KB Thumbs.db 77KB
bg.jpg 290B bt_register.png 1KB bt_login.png 1KB js jquery-1.3.2.min.js 56KB pngfix 
x.gif 49B Thumbs.db 5KB supersleight-min.js 1KB slide.js 384B
index.html 7KB资源评论
w1376036172015-06-16正在用 很好的资源 赞一个
柠檬土豆泥2013-01-05绝对好的代码，欢迎大家下载使用，仅限于学习交流，资源来自于网络、版权归原作者所有，严禁商用
