先贴图: 图2(展开): 具体代码如下: <!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> <title>仿QQ展开菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <mce:style type="text/css"><!-- table{width:100px;overflow:hidden;} #control,#control table,#control table td{font-size:12px;} #control{width:100px;background-color:#ccc;font-size:12px;color:#333333;text-align:center;} #control table{width:100px;height:20px;overflow:hidden;} #control table li{list-style:none;height:20px;line-height:20px;overflow:hidden;} #control table .tabTit{background:#E0E8B8;} #control a{font-weight:normal;font-size:24px;color:#6F7848;text-decoration:none;padding-right:10px;} #control .testLink{font-weight:bold;font-size:12px;} .test{width:100px;background-color:#f6f6f6;overflow:hidden;} .test li{list-style:none;color:#000;font-size:13px;line-height:20px;} #control table,.test table{margin:0 auto;text-align:center;} .style1{font-size:8px;color:#fff;} --></mce:style><style type="text/css" mce_bogus="1"> table{width:100px;overflow:hidden;} #control,#control table,#control table td{font-size:12px;} #control{width:100px;background-color:#ccc;font-size:12px;color:#333333;text-align:center;} #control table{width:100px;height:20px;overflow:hidden;} #control table li{list-style:none;height:20px;line-height:20px;overflow:hidden;} #control table .tabTit{background:#E0E8B8;} #control a{font-weight:normal;font-size:24px;color:#6F7848;text-decoration:none;padding-right:10px;} #control .testLink{font-weight:bold;font-size:12px;} .test{width:100px;background-color:#f6f6f6;overflow:hidden;} .test li{list-style:none;color:#000;font-size:13px;line-height:20px;} #control table,.test table{margin:0 auto;text-align:center;} .style1{font-size:8px;color:#fff;} </style> <mce:script language="javascript"><!-- function $G(Read_Id) { return document.getElementById(Read_Id) } var openedObjId=null function Effect(ObjectId){ if (openedObjId){ $G(openedObjId+"tab").innerHTML = "<a href="#" mce_href="#" >+</a>"; Start(openedObjId,'Close'); } if(openedObjId!=ObjectId){ $G(ObjectId+"tab").innerHTML = "<a href="#" mce_href="#">-</a>"; Start(ObjectId,'Opens'); openedObjId=ObjectId } else openedObjId=null } function Start(ObjId,method){ var BoxHeight = $G(ObjId).offsetHeight; //对象高度 var MinHeight = 5;//定义最小高度 var MaxHeight = 130;//定义最大高度 var BoxAddMax = 1;//递增量初始值 var Every_Add = 0.15;//每次的递(减)增量[数值越大速度越快] var Reduce = (BoxAddMax - Every_Add); var Add = (BoxAddMax + Every_Add); //折叠 if (method == "Close"){ var Alter_Close = function(){//构建虚拟的[递减]循环 BoxAddMax /= Reduce; BoxHeight -= BoxAddMax; if (BoxHeight <= MinHeight){ $G(ObjId).style.display = "none"; window.clearInterval(BoxAction); } else $G(ObjId).style.height = BoxHeight; } var BoxAction = window.setInterval(Alter_Close,1); } //展开 else if (method == "Opens"){ var Alter_Opens = function(){ BoxAddMax *= Add; BoxHeight += BoxAddMax; if (BoxHeight >= MaxHeight){ $G(ObjId).style.height = MaxHeight; window.clearInterval(BoxAction); }else{ $G(ObjId).style.display= "block"; $G(ObjId).style.height = BoxHeight; } } var BoxAction = window.setInterval(Alter_Opens,1); } } // --></mce:script> </head> <body> <div id="control"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" class="tabTit" onClick="Effect('test');"><li id="testtab" style="float:right" mce_style="float:right"><a href="/" mce_href="">+</a></li><li style="float:left" mce_style="float:left"><a href="/" mce_href="" class="testLink">网站首页</a></li></td> </tr> </table> </div> <div id="test" class="test" style="display:none;" mce_style="display:none;"> <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> <tr> <td colspan="3" align="center" valign="top"><ul><li><a href="/sort/list_5_80_1.shtml" mce_href="sort/list_5_80_1.shtml">游戏娱乐</a></li><li><a href="/sort/list_5_82_1.shtml" mce_href="sort/list_5_82_1.shtml">媒体网络</a></li><li><a href="/sort/list_5_99_1.shtml" mce_href="sort/list_5_99_1.shtml">窗体界面</a></li><li><a href="/sort/list_5_102_1.shtml" mce_href="sort/list_5_102_1.shtml">算法相关</a></li></ul></td> </tr> </table> </div> <br> <div id="control"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" class="tabTit" onClick="Effect('test1');" ><li id="test1tab" style="float:right" mce_style="float:right"><a href="#" mce_href="#">+</a></li><li style="float:left" mce_style="float:left"><a href="#" mce_href="#"class="testLink">JAVA源代码</a></li></td> </tr> </table> </div> <div id="test1" class="test" style="display:none;" mce_style="display:none;"> <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> <tr> <td colspan="3" align="center" valign="top"><ul><li><a href="/sort/list_5_93_1.shtml" mce_href="sort/list_5_93_1.shtml">系统相关</a></li><li><a href="/sort/list_5_90_1.shtml" mce_href="sort/list_5_90_1.shtml">综合应用</a></li><li><a href="/sort/list_5_89_1.shtml" mce_href="sort/list_5_89_1.shtml">文件操作</a></li></ul></td> </tr> </table> </div> <br> <div id="control"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" class="tabTit" onClick="Effect('test2');"><li id="test2tab" style="float:right" mce_style="float:right"><a href="#" mce_href="#">+</a></li><li style="float:left" mce_style="float:left"><a href="#" mce_href="#" class="testLink">JAVA源代码</a></li></td> </tr> </table> </div> <div id="test2" class="test" style="display:none;" mce_style="display:none;"> <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> <tr> <td colspan="3" align="center" valign="top"><ul><li><a href="/sort/list_5_88_1.shtml" mce_href="sort/list_5_88_1.shtml">书籍源码</a></li><li><a href="/sort/list_5_101_1.shtml" mce_href="sort/list_5_101_1.shtml">初学实例</a></li><li><a href="/sort/list_5_220_1.shtml" mce_href="sort/list_5_220_1.shtml">类库组件</a></li></ul></td> </tr> </table> </div> </body> </html>