就是比如说 一
二
三
点击“一”后变为 一
1
2
二
三
的样子
[此贴子已经被作者于2004-08-25 15:39:58编辑过]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><head> <title>QQ菜单</title> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> <script language='JavaScript'> var headHeight = 22;var bodyHeight = 202;var objcount = 6;var step = 10;var moving = false; function showme(obj1, obj2) { if (moving) return; moving = true; for(i=0;i<document.all.tags('td').length;i++) if (document.all.tags('td')[i].className.indexOf('headtd') == 0) document.all.tags('td')[i].className = 'headtd1'; obj2.className = 'headtd2'; moveme(obj1); } function moveme(obj) { idnumber = parseInt(obj.id.substr(4)); objtop = headHeight * (idnumber - 1); objbuttom = bodyHeight + headHeight * (idnumber - 2); currenttop = parseInt(obj.style.top); if (currenttop >= objbuttom) { countid = 1; for(i=0;i<document.all.tags('div').length;i++) if (document.all.tags('div')[i].id == 'item'+countid+'body') { obj = document.all.tags('div')[i]; objtop = headHeight * (countid - 1); if (countid == idnumber) { moveup(obj,objtop,false); break; } else moveup(obj,objtop,true); countid++; } } else if ((currenttop >= objtop) && (idnumber < objcount)) { idnumber++; countid = objcount; for(i=document.all.tags('div').length-1;i>=0;i--) if (document.all.tags('div')[i].id == 'item'+countid+'body') { obj = document.all.tags('div')[i]; objbuttom = bodyHeight + headHeight * (countid - 2); if (countid == idnumber) { movedown(obj,objbuttom,false); break; } else movedown(obj,objbuttom,true); countid--; } } } function moveup(obj,objtop,ismove) { currenttop = parseInt(obj.style.top); if (currenttop > objtop) { obj.style.top = currenttop - step; setTimeout('moveup('+obj.id+','+objtop+','+ismove+')',1) return; } moving = ismove; } function movedown(obj,objbuttom,ismove) { currenttop = parseInt(obj.style.top); if (currenttop < objbuttom) { obj.style.top = currenttop + step; setTimeout('movedown('+obj.id+','+objbuttom+','+ismove+')',1) return; } moving = ismove; } </script>
<style type='text/css'> .headtd1 { background: #000099; border: 1px outset; border-color: #00BBFF #0077FF #0077FF #00BBFF; cursor: hand; font-size: 9pt}.headtd2 { background: #20C1FF; border: 1px outset; border-color: #60D3FF #0077FF #0077FF #60D3FF; cursor: hand; font-size: 9pt}.bodytd { background: #FFFFFF; border: 1px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt} a { color: #000000} a:link { text-decoration: none;color:#000000 } a:visited { text-decoration: color:#000000} a:hover { text-decoration: none;color:#003399 } </style> </head>
<div id='mainboard' style='position:absolute; left:2px; top:2px; width:90px; height:312px; z-index:1; overflow: hidden; background: #FFFFFF;'> <div id='item1body' style='position:absolute; left:0; top:0; width:90px; height:202px; z-index:2; overflow: hidden'> <table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'> <tr> <td id='item1head' height='20' class='headtd2' onclick='showme(item1body,this)' align='center'><font color="#FFFFFF">学院概况</font></td> </tr> <tr> <td class='bodytd' align='center'><a href="general/xueyuan.htm" target="mainFrame">学院简介</a></td> </tr> <tr> <td class='bodytd' align='center'><a href="general/yuanzhang.htm" target="mainFrame">院长介绍</a></td> </tr> <tr> <td class='bodytd' align='center'><a href="general/xuexi.htm" target="mainFrame">学系设置</a></td> </tr> <tr> <td class='bodytd' align='center'><a href="general/bangong.htm" target="mainFrame">办公系统</a></td> </tr> </table> </div><div id='item2body' style='position:absolute; left:0; top:202; width:90px; height:202px; z-index:3; overflow: hidden'> <table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'> <tr> <td id='item2head' height='20' class='headtd1' onclick='showme(item2body,this)' align='center'><font color="#FFFFFF">师资队伍</font></td> </tr> <tr> <td class='bodytd' align='center'><a href="teacher/jianjie.htm" target="mainFrame">教师简介</a></td> </tr> <tr> <td class='bodytd' align='center'><a href="teacher/daoshi.htm" target="mainFrame">导师安排</a></td> </tr> </table> </div><div id='item3body' style='position:absolute; left:0; top:224; width:90px; height:202px; z-index:4; overflow: hidden'> <table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'> <tr> <td id='item3head' height='20' class='headtd1' onclick='showme(item3body,this)' align='center'><font color="#FFFFFF">学术研究</font></td> </tr> <tr> <td class='bodytd' align='center'><a href="xueshu/huodong.htm" target="mainFrame">学术活动</a></td> </tr> <tr> <td class='bodytd' align='center'><a href="xueshu/chengguo.htm" target="mainFrame">科研成果</a></td> </tr> </table> </div><div id='item4body' style='position:absolute; left:0; top:246; width:90px; height:202px; z-index:5; overflow: hidden'> <table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'> <tr> <td id='item4head' height='20' class='headtd1' onclick='showme(item4body,this)' align='center'><font color="#FFFFFF">课程设置</font></td> </tr> <tr> <td class='bodytd' align='center'><a href="kecheng/benke.htm" target="mainFrame">本科生</a></td> </tr> <tr> <td class='bodytd' align='center'><a href="kecheng/faxue.htm" target="mainFrame">法学研究生</a></td> </tr> <tr> <td class='bodytd' align='center'><a href="kecheng/jm.htm" target="mainFrame">JM研究生</a></td> </tr> <tr> <td class='bodytd' align='center'><a href="kecheng/ejm.htm" target="mainFrame">EJM研究生</a></td> </tr> <tr> <td class='bodytd' align='center'><a href="kecheng/boshi.htm" target="mainFrame">博士生</a></td> </tr> <tr> <td class='bodytd' align='center'><a href="kecheng/train.htm" target="mainFrame">研究生课程研修班</a></td> </tr> </table> </div><div id='item5body' style='position:absolute; left:0; top:268; width:90px; height:202px; z-index:6; overflow: hidden'> <table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'> <tr> <td id='item5head' height='20' class='headtd1' onclick='showme(item5body,this)' align='center'><font color="#FFFFFF">合作交流</font></td> </tr> <tr> <td class='bodytd' align='center'><a href="jiaoliu/coming.htm" target="mainFrame">来访学者</a></td> </tr> <tr> <td class='bodytd' align='center'><a href="jiaoliu/program.htm" target="mainFrame">交流项目</a></td> </tr> </table> </div> <div id='item6body' style='position:absolute; left:0; top:290; width:90px; height:202px; z-index:7; overflow: visible'> <table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'> <tr> <td id='item6head' height='20' class='headtd1' onclick='showme(item6body,this)' align='center'><font color="#FFFFFF">学生园地</font></td> </tr> <tr> <td class='bodytd' align='center'><a href="student/bachelor.htm" target="mainFrame">本科生</a></td> </tr> <tr> <td class='bodytd' align='center'><a href="student/master.htm" target="mainFrame">研究生</a></td> </tr> </table> </div></div></body></html>
说的这个吧
一
二
点击一后
一
1
2
3
二