页面导航：首页 → 网络编程 → JavaScript → 网页特效 → 导航菜单 → 正文内容

可以媲美Flash的JS导航菜单

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>媲美Flash的JS导航菜单</title> 
<style type="text/css"> 
 
</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 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>

</center> 
</body> 
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：可以媲美Flash的JS导航菜单