答案： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>媲美Flash的JS导航菜单</title> <style type="text/css"> <!-- .w1 { width: 538px; } .w2 { width: 100px; } .ztd { color: #202020; } .bg22 { color: #858585; height: 29px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .bg22 A{ color: #858585; } .bg27 { text-align: right; height: 30px; width: 538px; } .ztd { color: #202020; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .zta { color: #449100; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .bg28 { text-align: center; height: 28px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #202020; background-color: #FAFAFA; } body { text-align: center; } a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; color: #66614B; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:active { text-decoration: none; } a:hover { text-decoration: underline; } .ha { height: 8px; } .hb { height: 5px; } .img15 { background-image: url(http://www.zhaoxi.net/jstest/images/200651105044727.GIF); background-repeat: repeat-x; } .qh { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #3A3A3A; height: 28px; width: 533px; } .qhl { color: #3A3A3A; width: 235px; text-align: left; } .qhc { text-align: center; width: 60px; } .qhc a { color: #898989; } .qhr { color: #3A3A3A; text-align: right; width: 235px; } --> </style> <STYLE type=text/css>.table1 { BORDER-RIGHT: #cccccc 1px solid; BORDER-BOTTOM-COLOR: black; BORDER-LEFT: #cccccc 1px solid; BORDER-TOP-STYLE: solid; BORDER-TOP-COLOR: black; BACKGROUND-COLOR: #666666; BORDER-BOTTOM-STYLE: solid } .alp { FILTER: Alpha(Opacity=0,FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=80, FinishY=80); BACKGROUND-COLOR: #99ccff } .maskl { OVERFLOW: hidden } .submenu { BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #ffffff 1px solid } </STYLE> <SCRIPT> function subClose1(){ if(sub2.style.pixelLeft>-26){ sub2.style.pixelLeft--; setTimeout("subClose1()",1); }else{ sub2.style.pixelLeft=-26; subMenuShowing=false; hideM2(); } } subMenuShowing=false; function subMenu1(){ var obj=event.srcElement; subMenuShowing=true; sub2out(); } function sub2out(){ if(sub2.style.pixelLeft<2){ sub2.style.pixelLeft++; setTimeout("sub2out()",1); } } curSelect=0; function showMenu(mID){ var oMenu=eval("menu"+mID); var oCircle=eval("sl"+mID); oMenu.style.pixelTop+=10; if(oMenu.style.pixelTop<oCircle.style.pixelTop+6) { oMenu.timeHandle=setTimeout("showMenu("+mID+")",1); } else oMenu.style.pixelTop=oCircle.style.pixelTop+6; } function hideMenu(mID){ var oMenu=eval("menu"+mID); var oCircle=eval("sl"+mID); oMenu.style.pixelTop-=10; if(oMenu.style.pixelTop>-60) { oMenu.timeHandle=setTimeout("hideMenu("+mID+")",1); } else oMenu.style.pixelTop=-80; } function lightMv(){ if(light.filters.Alpha.opacity<100) { light.filters.Alpha.opacity+=5; light.timeHandle=setTimeout("lightMv()",1); } } function darkMv(){ if(light.filters.Alpha.opacity>0) { light.filters.Alpha.opacity-=5; light.timeHandle=setTimeout("darkMv()",1); } } function sfMv1(){ sl1.style.pixelTop+=sl1.mvStep; if ((sl1.dx++)>20) { sl1.mvStep=-sl1.mvStep; sl1.dx=0; sl1.speed=parseInt(Math.random(1)*60+1) } sl1.timeHandle=setTimeout("sfMv1()",sl1.speed); } function sfMv2(){ sl2.style.pixelTop+=sl2.mvStep; if ((sl2.dx++)>20) { sl2.mvStep=-sl2.mvStep; sl2.dx=0; sl2.speed=parseInt(Math.random(1)*60+1) } sl2.timeHandle=setTimeout("sfMv2()",sl2.speed); } function sfMv3(){ sl3.style.pixelTop+=sl3.mvStep; if ((sl3.dx++)>20) { sl3.mvStep=-sl3.mvStep; sl3.dx=0; sl3.speed=parseInt(Math.random(1)*60+1) } sl3.timeHandle=setTimeout("sfMv3()",sl3.speed); } function sfMv4(){ sl4.style.pixelTop+=sl4.mvStep; if ((sl4.dx++)>20) { sl4.mvStep=-sl4.mvStep; sl4.dx=0; sl4.speed=parseInt(Math.random(1)*60+1) } sl4.timeHandle=setTimeout("sfMv4()",sl4.speed); } function stopAllMv(){ clearTimeout(sl1.timeHandle); clearTimeout(sl2.timeHandle); clearTimeout(sl3.timeHandle); clearTimeout(sl4.timeHandle); } function startAllMv(){ clearTimeout(light.timeHandle); darkMv(); sfMv1(); sfMv2(); sfMv3(); sfMv4(); } function showM1(){ if(!subMenuShowing){ stopAllMv(); light.style.pixelTop=sl1.style.pixelTop-30; clearTimeout(light.timeHandle); clearTimeout(menu1.timeHandle); lightMv(); showMenu(1); } } function showM2(){ if(!subMenuShowing){ stopAllMv(); light.style.pixelTop=sl2.style.pixelTop-30; clearTimeout(light.timeHandle); clearTimeout(menu2.timeHandle); lightMv(); showMenu(2); } } function showM3(){ if(!subMenuShowing){ stopAllMv(); light.style.pixelTop=sl3.style.pixelTop-30; clearTimeout(light.timeHandle); clearTimeout(menu3.timeHandle); lightMv(); showMenu(3); } } function showM4(){ if(!subMenuShowing){ stopAllMv(); light.style.pixelTop=sl4.style.pixelTop-30; clearTimeout(light.timeHandle); clearTimeout(menu4.timeHandle); lightMv(); showMenu(4); } } function hideM1(){ if (!subMenuShowing){ startAllMv(); clearTimeout(menu1.timeHandle); hideMenu(1); } } function hideM2(){ if (!subMenuShowing){ startAllMv(); clearTimeout(menu2.timeHandle); hideMenu(2); } } function hideM3(){ if (!subMenuShowing){ startAllMv(); clearTimeout(menu3.timeHandle); hideMenu(3); } } function hideM4(){ if (!subMenuShowing){ startAllMv(); clearTimeout(menu4.timeHandle); hideMenu(4); } } function init(){ sl1.mvStep=1; sl1.dx=0; sl1.speed=50; sl2.mvStep=1; sl2.dx=0; sl2.speed=1; sl3.mvStep=1; sl3.dx=0; sl3.speed=10; sl4.mvStep=1; sl4.dx=0; sl4.speed=20; startAllMv(); } </SCRIPT> <META content="Microsoft FrontPage 6.0" name=GENERATOR></head> <BODY text=#cccccc bgColor=#000000 leftMargin=0 topMargin=0 onload=init() marginheight="0" marginwidth="0"><DIV class=table1 id=Layer1 style="Z-INDEX: 3; LEFT: 50px; WIDTH: 26px; POSITION: absolute; TOP: 0px; HEIGHT: 100%"> <DIV id=sl1 onmouseover=showM1() style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 40px; HEIGHT: 24px" onmouseout=hideM1()><IMG height=24 src="/upload/20121013/200651104740731.gif" width=24></DIV> <DIV id=sl2 onmouseover=showM2() style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 140px; HEIGHT: 24px" onclick=subMenu1() onmouseout=hideM2()><IMG height=24 src="/upload/20121013/200651104740731.gif" width=24></DIV> <DIV id=sl3 onmouseover=showM3() style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 240px; HEIGHT: 24px" onmouseout=hideM3()><IMG height=24 src="/upload/20121013/200651104740731.gif" width=24></DIV> <DIV id=sl4 onmouseover=showM4() style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP:</pre><p>上一个：<a href="/show/3ea3ec66fd624014.htm">B/S开发中常用javaScript技术与代码</a><br/>下一个：<a href="/show/4db11c010ebec337.htm">腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果二</a></p><div class="piclist">更多图片编程知识:<ul><li><a href="/show/85c150f53059be54.htm"><img src='/upload/2013111519/20130131110658131.png' width=105 height=105><br/>jquery异步传输json数据格式实例</a></li><li><a href="/show/2ee611f83c2f9cc9.htm"><img src='/upload/20121013/2006111495717480.gif' width=105 height=105><br/>"好玩的放大镜效果" 的另一种实现方法</a></li><li><a href="/show/1765b0c93319e047.htm"><img src='/upload/20121013/code.gif' width=105 height=105><br/>国内首发 -- ajax完整功能框架</a></li><li><a href="/show/22c21985608d7b90.htm"><img src='/upload/2013111519/20131104102218607.jpg' width=105 height=105><br/>js实现幻灯片效果</a></li><li><a href="/show/4c5773fa0b25c53a.htm"><img src='/upload/2013111519/20130308082403349.jpg' width=105 height=105><br/>一个页面使用两次timepicker.js引起的Maximum call stack size exceeded问题解决办法及bug修复</a></li><li><a href="/show/8b6a4987c36b9fec.htm"><img src='/upload/2013111604/20130311025822643.png' width=105 height=105><br/>JSP原理笔记（二）</a></li></ul></div></div> <div class="zykmore"><script type="text/javascript" src="/js/s4.js"></script></div><div class="more"><dl><dt>更多<a href="/list/7_1.htm">JS</a>疑问解答：</dt><dd><a target="_blank" href="/show/31f300d314d4c0d3.htm">几个验证11位手机号码格式的js代码</a></dd><dd><a target="_blank" href="/show/7d909e714c0774e2.htm">js如何获得FCKeditor控件的值</a></dd><dd><a target="_blank" href="/show/b4327bdd4ebbebcb.htm">用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...</a></dd><dd><a target="_blank" href="/show/cbcc4d7336496819.htm">JS验证，这块“牛皮”反复修改都不能实现</a></dd><dd><a target="_blank" href="/show/cb91bc419542ce9f.htm">在JS中使用DOM模型</a></dd><dd><a target="_blank" href="/show/897f78948b91f031.htm">如何用JS 获取本地文件夹的文件列表</a></dd><dd><a target="_blank" href="/show/58cf22df63d3344a.htm">js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？</a></dd><dd><a target="_blank" href="/show/b1e97b258c9ed0b3.htm">求实现自动生成图片缩略图的JS代码</a></dd><dd><a target="_blank" href="/show/59e5b8e1f4421028.htm">JS脚本网页问题</a></dd><dd><a target="_blank" href="/show/2c3f71b731258761.htm">js，代码中"object"和"Object"区别？</a></dd><dd><a target="_blank" href="/show/b281b7d5eabf3339.htm">js+flash实现网页图片切换效果，出现边框，单击激活此控件。</a></dd><dd><a target="_blank" href="/show/3aa8e41c89689f54.htm">JS怎样操作PHP中的参数</a></dd><dd><a target="_blank" href="/show/b4b8714c029b37a6.htm">js 怎么在一打开页面就加载这个函数。</a></dd><dd><a target="_blank" href="/show/8c57097425b52fc7.htm">Date.parse()的问题(js)</a></dd><dd><a target="_blank" href="/show/012152bfb53fdf04.htm"><script src="/{maxcms:sitepath}js/common.js"></script>是什么意思</a></dd></dl></div> </div> <div id="zykleft"> <div class="leftm"> <div id="logo"><a href="http://www.zzzyk.com/">站长资源库</a> <div class="clear"></div><script type="text/javascript" src="/js/i7f.js"></script></div> <script type="text/javascript" src="/js/sharen.js"></script><div class="clear"></div> <dl class="list"><dd><a href="/list/1_1.htm">asp</a></dd><dd><a href="/list/2_1.htm">php</a></dd><dd><a href="/list/3_1.htm">Delphi</a></dd><dd><a href="/list/4_1.htm">Matlab</a></dd><dd><a href="/list/5_1.htm">JSP</a></dd><dd><a href="/list/6_1.htm">Foxpro</a></dd><dd><a href="/list/7_1.htm">JS</a></dd><dd><a href="/list/8_1.htm">C/C++</a></dd><dd><a href="/list/9_1.htm">C#/ASP.NET</a></dd><dd><a href="/list/10_1.htm">VC++</a></dd><dd><a href="/list/11_1.htm">JAVA</a></dd><dd><a href="/list/12_1.htm">VB</a></dd><dd><a href="/list/13_1.htm">汇编语言</a></dd><dd><a href="/list/20_1.htm">html/css</a></dd><dd><a href="/list/21_1.htm">CGI</a></dd><dd><a href="/list/23_1.htm">XML/UML</a></dd><dd><a href="/list/24_1.htm">wap</a></dd><dd><a href="/list/27_1.htm">网站相关</a></dd><dd><a href="/list/60_1.htm">网页素材</a></dd><dd><a href="/list/70_1.htm">python</a></dd></dl><dl class="notice">如果你遇到<a href="/default.htm">编程学习</a>难题：<br/>请访问www.zzzyk.com 试试</dl> </div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s5.js"></script></dt></dl></div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s6.js"></script></dt></dl></div> </div></div> <div class="clear"></div> <div class="bdshare"> <script type="text/javascript" src="/js/share.js"></script> </div> <div class="clear"></div> <div class="foot">CopyRight © 2012 站长网 编程知识问答 <a href="http://www.zzzyk.com">www.zzzyk.com</a> All Rights Reserved<br/>部份技术文章来自网络，<script type="text/javascript" src="/images/my.js"></script> </div> </body> </html>