<!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=gb2312" />
<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:80px;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"><h3>内衣世家有限公司</h3> <a class="regfont" href="http://www.baidu.com">注册Demo</a></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 style=" width:720px; height:80px; background-color:#FFFFFF; float:right;"></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"><input type="submit" value="提交" class="submit" /></td></tr></table>
</fieldset>
</form>
<img class="delete" src="images/shut.gif" title="关闭" />
</div>
<!--login bar Over-->
<div id="notice">
<h4>本页面为jQuery Animate�
