效果图及代码如下：<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <LINK media=all href="images/home.css" type=text/css rel=stylesheet> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript"><!-- $(function () { //展开按钮 $('#Bl_3').click(function () { //把外框架设置为显示. //把left和top去掉 ,试试. //$('#group_id').css({"display":"block"}); $('#group_id').css({ "display": "block", "left": "199px", "top": "6px" }); $('#group').animate({ left: "0" }, 500); }) //关闭按钮 $('#closeDiv').click(function () { $('#group').animate({ left: "-530" }, { queue: false, duration: 500, complete: cssrain }); return false; }) //complete: 完成animate动作后,回调其他函数. //把外框架设置为 隐藏. function cssrain() { $('#group_id').css("display", "none"); }
})//--></SCRIPT></head><body> <form id="form1" runat="server"><!--产品报价 开始--><DIV class=div_body><DIV class="bodyWW mt6"><!-- left --><DIV class=Bl id=price_areaID style="margin-left:50px"><DIV class="Bl_1 tm" style="height:27px"><A href="http://www.cssrain.cn" target="_blank" class=bei12bi>cssrain jQuery demo</A></DIV><!-- notebook --><DIV class="Bl_2 bd"><DIV class=Bl_3 id="Bl_3"><IMG src="images/btn_tp.gif"></DIV></DIV></DIV>
<!--主体内容开始 --><DIV id=group_id style="BORDER-TOP-WIDTH: 0px; DISPLAY: none; BORDER-LEFT-WIDTH: 0px; Z-INDEX: 900; BORDER-BOTTOM-WIDTH: 0px; OVERFLOW: hidden; WIDTH: 51em; POSITION: absolute; HEIGHT: 540px; BORDER-RIGHT-WIDTH: 0px"><DIV class=B_group id=group style="Z-INDEX: 901; LEFT: -530px; POSITION: absolute; TOP: 0px"><DIV class=B_div><DIV class=B_div_1><DIV class=f14b><A id="closeDiv" class=bei12bi href="http://www.cssrain.cn" >关闭</A></DIV></DIV><DIV class="B_div_2 lan12"><DIV class=B_div_2c style="PADDING-TOP: 0px"><IMG src="images/a10.gif"><A href="http://www.cssrain.cn" target="_blank" ><B>新闻资讯</B></A><BR><A href="http://www.cssrain.cn" target="_blank" >业界动态</A> | <A href="http://www.cssrain.cn" target="_blank" >设计竞赛</A> | <A href="http://www.cssrain.cn" target="_blank" >设计名家</A> | <br /><A href="http://www.cssrain.cn" target="_blank" >新锐设计师</A> | <A href="http://www.cssrain.cn" target="_blank" >设计杂谈</A> | <A href="http://www.cssrain.cn" target="_blank" >互联网</A> | <br /><A href="http://www.cssrain.cn" target="_blank" >漫画欣赏</A> | </DIV><DIV class=B_div_2ln1></DIV><DIV class=B_div_2cc style="PADDING-TOP: 0px"><IMG src="images/a10.gif"><A href="http://www.cssrain.cn" target="_blank" ><B>酷站欣赏</B></A><BR><A href="http://www.cssrain.cn" target="_blank" >韩国酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >国内酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >欧美酷站</A> | <br /><A href="http://www.cssrain.cn" target="_blank" >日本酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >Flash酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >CSS酷站</A> | <br /><A href="http://www.cssrain.cn" target="_blank" >象素酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >全部酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >发布酷站</A> | </DIV><DIV class=B_div_2ln2 style="OVERFLOW: hidden"></DIV><DIV class=B_div_2c><IMG src="images/a10.gif"> <A href="http://www.cssrain.cn" target="_blank" ><B>酷站欣赏</B></A><BR><A href="http://www.cssrain.cn" target="_blank" >韩国酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >国内酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >欧美酷站</A> | <br /><A href="http://www.cssrain.cn" target="_blank" >日本酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >Flash酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >CSS酷站</A> | <br /><A href="http://www.cssrain.cn" target="_blank" >象素酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >全部酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >发布酷站</A> |</DIV><DIV class=B_div_2ln3></DIV><DIV class=B_div_2cc><IMG src="images/a10.gif"><A href="http://www.cssrain.cn" target="_blank" ><B>酷站欣赏</B></A><BR><A href="http://www.cssrain.cn" target="_blank" >韩国酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >国内酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >欧美酷站</A> | <br /><A href="http://www.cssrain.cn" target="_blank" >日本酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >Flash酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >CSS酷站</A> | <br /><A href="http://www.cssrain.cn" target="_blank" >象素酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >全部酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >发布酷站</A> |</DIV><DIV class=B_div_2ln2></DIV><DIV class=B_div_2c><IMG src="images/a10.gif"><A href="http://www.cssrain.cn" target="_blank" ><B>酷站欣赏</B></A><BR><A href="http://www.cssrain.cn" target="_blank" >韩国酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >国内酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >欧美酷站</A> | <br /><A href="http://www.cssrain.cn" target="_blank" >日本酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >Flash酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >CSS酷站</A> | <br /><A href="http://www.cssrain.cn" target="_blank" >象素酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >全部酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >发布酷站</A> |</DIV><DIV class=B_div_2ln4></DIV><DIV class=B_div_2cc><IMG src="images/a10.gif"><A href="http://www.cssrain.cn" target="_blank" ><B>酷站欣赏</B></A><BR><A href="http://www.cssrain.cn" target="_blank" >韩国酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >国内酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >欧美酷站</A> | <br /><A href="http://www.cssrain.cn" target="_blank" >日本酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >Flash酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >CSS酷站</A> | <br /><A href="http://www.cssrain.cn" target="_blank" >象素酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >全部酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >发布酷站</A> |</DIV><DIV class=B_div_2ln2></DIV><DIV class=B_div_2c style="OVERFLOW: hidden; WIDTH: 470px; HEIGHT: 112px"><IMG src="images/a10.gif"><A href="http://www.cssrain.cn" target="_blank" ><B>酷站欣赏</B></A><BR><A href="http://www.cssrain.cn" target="_blank" >韩国酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >国内酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >欧美酷站</A> | <br /><A href="http://www.cssrain.cn" target="_blank" >日本酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >Flash酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >CSS酷站</A> | <br /><A href="http://www.cssrain.cn" target="_blank" >象素酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >全部酷站</A> | <A href="http://www.cssrain.cn" target="_blank" >发布酷站</A> |</DIV></DIV></DIV><DIV class=B_div_4></DIV></DIV></DIV><!--right --></DIV></DIV> </form></body></html>
