媲美Flash的导航菜单 --e天下网络

媲美Flash的导航菜单

[ 来路：时间：2007-9-15 11:57:25 点击： ]

媲美Flash的导航菜单

把如下代码复制到<body></body>之间

 <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="circle2.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="circle2.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="circle2.gif" width=24></DIV>  <DIV id=sl4 onmouseover=showM4() style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 340px; HEIGHT: 24px" onmouseout=hideM4()><IMG height=24 src="circle2.gif" width=24></DIV> <DIV class=alp id=light style="Z-INDEX: 2; LEFT: -26px; WIDTH: 80px; POSITION: absolute; TOP: 0px; HEIGHT: 80px"></DIV></DIV>   <DIV style="Z-INDEX: 2; LEFT: -60px; WIDTH: 30px; POSITION: absolute; TOP: 0px; HEIGHT: 100px">  <DIV id=menu1 style="Z-INDEX: 5; LEFT: 82px; WIDTH: 20px; POSITION: absolute; TOP: -80px; HEIGHT: 55px"><IMG height=62 src="butong_net_01.gif" width=24></DIV>  <DIV id=menu2 style="Z-INDEX: 5; LEFT: 82px; WIDTH: 23px; POSITION: absolute; TOP: -80px; HEIGHT: 75px"><IMG height=77 src="butong_net_02.gif" width=24></DIV>  <DIV id=menu3 style="Z-INDEX: 5; LEFT: 82px; WIDTH: 22px; POSITION: absolute; TOP: -80px; HEIGHT: 75px"><IMG height=77 src="butong_net_03.gif" width=24></DIV>  <DIV id=menu4 style="Z-INDEX: 5; LEFT: 82px; WIDTH: 23px; POSITION: absolute; TOP: -80px; HEIGHT: 77px"><IMG height=77 src="butong_net_04.gif" width=24></DIV></DIV>   <DIV class=maskl id=masksub style="Z-INDEX: 4; LEFT: 80px; WIDTH: 32px; POSITION: absolute; TOP: 0px; HEIGHT: 100%"> <DIV id=sub2 style="Z-INDEX: 1; LEFT: -26px; WIDTH: 26px; POSITION: absolute; TOP: 137px; HEIGHT: 304px"> <TABLE class=submenu height="100%" cellSpacing=2 cellPadding=0 width="100%" border=0> <TBODY> <TR><TD bgColor=#666699>特效</TD></TR> <TR><TD bgColor=#666699>特效</TD></TR> <TR><TD bgColor=#666699>特效</TD></TR> <TR><TD bgColor=#666699 height=147>特效</TD></TR> <TR><TD onmouseover="this.bgColor='#9999cc'" onmouseout="this.bgColor='#666699'" bgColor=#666699 height=10> <DIV style="CURSOR: hand" onclick=subClose1() align=center><B><FONT color=#ffff00>B</FONT></B></DIV> </TD></TR></TBODY></TABLE></DIV></DIV> 

把如下代码复制到<head></head>之间

<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="MSHTML 6.00.2600.0" name=GENERATOR>

修改<body>标签为

下载该特效所用的图片文件(右键另存为)

使用说明：将上面压缩包解压到与使用此特效网页的同一文件夹中,在代码中有该特效的详细注释,要添加或删除子菜单只需增加或删除代码中所注释的第二个按钮子菜单的代码段,但注意如果添加子菜单,在复制第二个按钮子菜单的代码段时其中的subClose1、subMenu1、sub2out、sub2、hideM2要修改,不能和其他子菜单中同名.该特效中的内容、背景等可根据代码中的注释自行修改.

：：：：站长友情提示：多花一分钟学点什么都好：：：：

：：热点信息：：

= = 免责声明 = =

① 欢迎转载我网所刊信息，请注明“来源：E天下网络”。
② 凡本网注明“来源：XXX（非E天下网络）”的作品，均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的，请在30日内进行。
※联系方式：Airtofly@163.com

：：推荐文章：：

Win 2000中DNS服务器的设置

：：视频教程：：

Photoshop	Dreamweaver
Flash MX	Fireworks
Office	AutoCAD
FrontPage	CORELDRAW