[『网页特效代码*导航菜单类*』]媲美Flash的JS导航菜单 摩羯天使 发布于 2007-01-06 14:50 Tags: 时尚 图片 代码 素材 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效代码|JsCode.CN|---媲美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.jscode.cn/Uploadfile/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="http://www.jscode.cn/Uploadfile/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="http://www.jscode.cn/Uploadfile/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="http://www.jscode.cn/Uploadfile/200651104740731.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="http://www.jscode.cn/Uploadfile/200651104740731.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="http://www.jscode.cn/Uploadfile/200651105053281.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="http://www.jscode.cn/Uploadfile/200651105059286.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="http://www.jscode.cn/Uploadfile/20065110515713.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="http://www.jscode.cn/Uploadfile/200651105110149.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><center> </center> </body> </html> 效果 请打开『网页编辑器-3』 将代码放入“代码”处再点击“预览”看效果
[『网页特效代码*导航菜单类*』]媲美Flash的JS导航菜单 摩羯天使 发布于 2007-01-06 14:50
Tags: 时尚 图片 代码 素材 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效代码|JsCode.CN|---媲美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.jscode.cn/Uploadfile/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="http://www.jscode.cn/Uploadfile/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="http://www.jscode.cn/Uploadfile/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="http://www.jscode.cn/Uploadfile/200651104740731.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="http://www.jscode.cn/Uploadfile/200651104740731.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="http://www.jscode.cn/Uploadfile/200651105053281.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="http://www.jscode.cn/Uploadfile/200651105059286.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="http://www.jscode.cn/Uploadfile/20065110515713.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="http://www.jscode.cn/Uploadfile/200651105110149.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><center> </center> </body> </html> 效果 请打开『网页编辑器-3』 将代码放入“代码”处再点击“预览”看效果
代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效代码|JsCode.CN|---媲美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.jscode.cn/Uploadfile/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="http://www.jscode.cn/Uploadfile/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="http://www.jscode.cn/Uploadfile/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="http://www.jscode.cn/Uploadfile/200651104740731.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="http://www.jscode.cn/Uploadfile/200651104740731.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="http://www.jscode.cn/Uploadfile/200651105053281.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="http://www.jscode.cn/Uploadfile/200651105059286.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="http://www.jscode.cn/Uploadfile/20065110515713.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="http://www.jscode.cn/Uploadfile/200651105110149.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><center> </center> </body> </html>
效果
请打开『网页编辑器-3』 将代码放入“代码”处再点击“预览”看效果
Re:媲美Flash的JS导航菜单 人淡如菊 发布于 2007-11-26 07:37 妙！就是不回用：（
Re:媲美Flash的JS导航菜单 人淡如菊 发布于 2007-11-26 07:37
妙！就是不回用：（
Re:媲美Flash的JS导航菜单 小白 发布于 2007-04-08 17:18 超帅，我要了
Re:媲美Flash的JS导航菜单 小白 发布于 2007-04-08 17:18
超帅，我要了
首页 『图片素材*综合类*』(32) 『图片素材*节日类*』(46) 『图片素材*花草类*』(3) 『图片素材*风景类*』(4) 『图片素材*人物类*』(31) 『图片素材*动物类*』(4) 『图片素材*Gif动画*』(10) 『图片素材*信纸类*』(15) 『图片素材*横幅类*』(2) 『图片素材*年历、月历、日历*』(2) 『图片特效』(5) 『网页背景*综合类*』(10) 『网页背景*节日类*』(3) 『网页背景*溶图*』(6) 『网页背景*花草类*』(1) 『网页背景*闪底*』(0) 『网页背景*动态类*』(1) 『网页色彩』(2) 『网页特效代码*综合类*』(13) 『网页特效代码*鼠标特效类*』(0) 『网页特效代码*导航菜单类*』(9) 『网页特效代码*图片特效类*』(1) 『特效文字』(7) 『网页播放器』(2) 『图标』(10) 『壁纸』(1) 『花边*蕾丝花边*花纹』(2) 『边框*表格』(34) 『分隔线』(31) 『分隔线*节日类*』(3) 『Flash素材』(28) 『Flash素材*节日类*』(5) 『套装素材』(16) 『Photoshop学习』(1) 『网页制作技巧』(5) 『经典素材站』(4) 『网站欣赏』(3) 『原创音画』(3) 『临时储藏室』(3) 『私密空间』(6) 『其它』(5)
素材阁所有素材资源除署名外均由摩羯天使从网络搜集并整理制作与朋友们分享，如有不慎侵犯作者或公司版权的地方敬请发邮件告之，本人将尽快删除。 （E-mail:yaonana67@126.com）
可爱牛图集锦 精美溶图素材(五) 精美溶图素材(四) 精美溶图素材(三) 精美溶图素材(二)
『音乐发烧友』 『摩羯天使』 『DAYDREAM』 『卡卡音乐书房』 『席家花园』 『Yupoo相册』 『网页编辑器-1』 『网页编辑器-2』 『网页编辑器-3』 『网页编辑器-4』 『网页编辑器-5』 『日志背景图产生器』 『在线日历』 『在线制作照片贺卡』 『在线处理照片』 『图片滤镜产生器』 『在线图片工具』 『页面效果生成器』 『在线制作相册MV视频』 『最酷的在线相册』 『配色方案-1』 『配色方案-2』 『配色方案-3』 『配色方案-4』 『配色方案-5』 『在线配色』 『中国传统色彩名录』 『滚动条颜色生成器』 『Logo在线制作』 『Logo，Button在线制作』 『3D banner在线制作』 『Flash上传空间』 『IE在线PhotoShop』 『在线生成行走动画』 『论坛动画头像在线制作』 『印章在线制作』 『Html-Js代码互转便利工具』 『PS透明蕾丝素材』 『各种字体生成器』 『在线汉字简体繁体转换』 『英文闪字生成器-1』 『英文闪字生成器-2』 『字体工具』 『闪字生成器』 『洪恩在线有声词典』 『世界地图』 『真题网』 『原版英语』 『在线词典』 『我爱英语网』 『MP3：闭着眼睛背四级单词』 『爱词霸』 『esnips』 『音乐搜索-搜狗』 『音乐搜索-奇虎』 『音乐搜索-SOSO音乐』 『看道音乐网』 『圣经』 『纳米盘』
用户名
密 码
日志总数:371 今日访问:3453 访问总数:1975945 评论总数:275 留言总数:70
[『网页特效代码*导航菜单类*』]媲美Flash的JS导航菜单 
日志列表 
屏幕分辨率设置1024x768像素
