<!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>login</title>
<script type="text/javascript" src="jquerymini.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//控制注册框动画
$(".regfont").click(function(){//点击注册按钮时关闭或者打开注册框
$("#regbox").slideToggle("slow");//如果隐藏就显示，反之...
return false;
});
//关闭注册框动画
$(".delete").click(function(){//关闭注册框
$("#regbox").animate({top:"-100px",opacity:"hide"},1000).animate({top:"0px"})//在1秒钟里动画向上移动100个像素，然后移动到初始位置
});
//控制登录框动画
$(".loginfont").click(function(){//点击登录按钮时关闭或者打开登录框
$(".loginbox").animate({opacity:"toggle",left:"50px"},1000).animate({left:"10px"},"fast");//如果隐藏则显示，向右移动50像素
return false;
});
//小图标晃动动画
$("#nav").find("img").mouseover(function(){
$(this)
.animate({ left: -20 })
.animate({ left: 20 })
.animate({ left: -20 })
.animate({ left: 20 })
.animate({ left: -20 })
.animate({ left: 20 })
.animate({ left: 0 });
});
//notice动画
$("#notice").animate({opacity:"show"},000).animate({opacity:"0.1"},200).animate({opacity:"0.9"},200).animate({opacity:"0.1"},200).animate({opacity:"0.9"},200).slideUp("slow").slideDown("slow");
setTimeout("$('#siderbar').slideUp('slow').slideDown('slow')",1000);//1秒钟以后折叠然后展开层silderbar
//控制右侧BOX框动画
setTimeout("$('#rightbox').show('slow')",2000);//2秒钟以后显示隐藏层rightbox
//控制右侧BOX框内的DD显示与隐藏
//第一个基本效果
$("#rightbox").find("dt:first").click(function(){
$(this).next().toggle("slow");
});
//第二个滑动效果
$("#rightbox").find("dt:eq(1)").click(function(){
$(this).next().slideToggle("slow");
});
//第三个淡入淡出
$("#rightbox").find("dt:eq(2)").click(function(){
$(this).next().animate({opacity:"toggle"},"slow")
});
//第四个自定义动画，这里的toggle(fn1,fn2)意思是：每次点击时切换要调用的函数fn1,fn2
$("#rightbox").find("dt:last").toggle(function(){
$(this).next().animate({height:"100px"},"slow").animate({height:"toggle"});
$("img",this).attr("src","images/down.png")
},function(){
$(this).next().animate({height:"toggle"}).animate({height:"80px"},"slow");
$("img",this).attr("src","images/up.png")
});
//控制标题栏的上下箭头切换，不知道为什么会和最后一个发生了冲突，大概是因为都用了toggle切换函数，导致最后一个出现错误，
//因此这里使用了dt:lt(3)只应用在前3个DT上了，单独给最后一个又写了一次。
$("#rightbox").find("dt:lt(3)").toggle(function(){
$(this).find("img").attr("src","images/down.png")
},function(){
$(this).find("img").attr("src","images/up.png")
});
})
</script>
<style>
* { margin:0; padding:0}
ul { list-style:none}
body{ background:#000; font-size:12px;}
#loginbar {width:100%;height:30px;background-color:#930003;color:#FFFFFF;filter:Alpha(style=1,opacity=100,finishOpacity=0); line-height:30px; text-indent:20px; border-bottom:1px solid #FFF; }
#loginbar a:link { color:#FFFFFF}
#loginbar a:visited { color:#FFFFFF}
#loginbar a:hover { color:#FFCC00}
#leftbox { width:28%; height:600px; float:left;}
/*right box*/
#rightbox { width:69%; height:575px; background:#930003; border:1px solid #932C00; margin-top:5px;filter:Alpha(startX=0, startY=100, finishX=0, finishY=0,style=1,opacity=0,finishOpacity=100); display:none; float:left ; background:#571600; margin-left:5px; padding:5px}
#regbox { width:90%; height:auto; color:#FFFFFF; font-weight:bold; background:#930003; border:1px solid #FFF; border-top:none; margin-top:-3px;z-index:5; position:relative; float:right; padding:5px;display:none}
* html #regbox {margin-top:-1px;}
#regbox input { width:80%}
#regbox .delete { position:absolute; bottom:12px;right:20px; cursor:pointer}
#regbox fieldset { padding:3px; text-align:center; line-height:22px; width:90%; margin:0 auto;}
.mleft { margin-left:10px; color:#FF9900}
.fleft { float:left; width:auto}
.right{ float:right; width:auto}
.fullwidth { width:100%}
.loginbox { display:none; position:relative;}
* html .loginbox { margin-top:3px;}
.submit {width:50px; background:#930003; color:#FFFFFF; font-weight:bold; margin-top:3px;}
* html .submit { margin-top:0}
/*nav*/
#nav { width:auto; height:auto;position:relative; margin-top:3px;}
#nav ul li { list-style:none; display:inline; line-height:30px;}
#nav ul li img { position:relative; cursor:pointer;}
/*notice*/
#notice { width:90%; height:80px;background:#930003; border:1px solid #FFF; position:relative;text-align:center; color:#FFCC00; line-height:25px; float:right; margin:5px 0 5px 0; padding:5px;}
/*Myinfo*/
#siderbar { width:90%; background:#930003; border:1px solid #FFF;height:477px; position:relative;filter:Alpha(startX=0, startY=100, finishX=0, finishY=0,style=1,opacity=0,finishOpacity=100);color:#FC0; font-weight:bold; float:right; line-height:22px; padding:5px;}
.photo { float:left; margin-right:5px; margin-bottom:10px;}
.photo img { width:144px; height:192px; border:1px solid #FF9900;}
.clear { clear:both}
.rtitle { background:#999900; border-left:10px solid #FF9900; width:99%; height:30px; line-height:30px; font-size:14px; font-weight:bold; text-indent:10px;}
.rcontent { width:96%; border:1px solid #CCCCCC; height:auto; color:#FFFFFF; line-height:20px; padding:5px; margin:0 auto; margin-top:5px;margin-bottom:5px;}
#rightbox dl { width:100%; height:auto}
#rightbox dt{ background:#999900; border-left:10px solid #FF9900;border-bottom:1px solid #FF9900; width:99%; height:30px; line-height:30px; font-size:14px; font-weight:bold; text-indent:10px; cursor:pointer; position:relative}
#rightbox dt img { position:absolute; right:10px; top:10px;}
#rightbox dd {width:96%; border:1px solid #CCCCCC; height:auto; color:#FFFFFF; line-height:20px; padding:5px; margin:0 auto; margin-top:5px;margin-bottom:5px; background:#000000}
</style>
</head>
<body>
<!--login bar Start-->
<div id="loginbar">
<div class="fleft"><a class="loginfont" href="http://www.baidu.com">登录Demo</a></div>
<div class="fleft loginbox">
<div class="fleft">用户名：<input type="text" /> </div>
<div class="fleft">密 码：<input type="password" /></div>
<div class="fleft"><input type="submit" value="提交" class="submit"/></div>
</div>
<div class="fleft"> <a class="regfont" href="http://www.baidu.com">注册Demo</a></div>
<div class="fleft"><span class="mleft">demo:褪色</span></div>
<div id="nav" class="fleft">
<ul>
<li><img src="images/01.png" /></li>
<li><img src="images/02.png" /></li>
<li><img src="images/03.png" /></li>
<li><img src="images/04.png" /></li>
<li><img src="images/05.png" /></li>
<li><img src="images/06.png" /></li>
<li><img src="images/07.png" /></li>
<li><img src="images/08.png" /></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="leftbox">
<div id="regbox">
<form action="" name="form1">
<fieldset>
<legend>注册信息</legend>
<table width="100%">
<tr><td width="40%">用户名：</td><td><input type="text" /></td></tr>
<tr><td>密 码：</td><td><input type="password" /></td></tr>
<tr><td>提示问题：</td><td><input type="text" /></td></tr>
<tr><td>问题答案：</td><td><input type="text" /></td></tr>
<tr><td colspan="2">
jQuery+Animate+Demo+By_褪色.rar （20个子文件） 
jQuery Animate Demo By_褪色 images 
13.png 679B 03.png 518B 08.png 527B
delete.gif 1KB 11.png 680B 06.png 549B shut1.gif 314B
2.jpg 47KB 01.png 560B up.png 3KB logo.gif 3KB shut.gif 851B 05.png 555B 12.png 688B down.png 3KB 07.png 550B 04.png 567B 02.png 542B
jquerymini.js 30KB
login.html 11KB资源评论
yjhtxwd2014-09-18下载来参考看看，有参考价值
