网页设计

与Flash媲美的JS左侧导航菜单

作者：我就是个世界 发表于：2008-01-24
[html]



网页特效代码|JsCode.CN|---媲美Flash的JS导航菜单







style="Z-INDEX: 3; LEFT: 50px; WIDTH: 26px; POSITION: absolute; TOP: 0px; HEIGHT: 100%">
style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 40px; HEIGHT: 24px"
onmouseout=hideM1()>与Flash媲美的JS左侧导航菜单

style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 140px; HEIGHT: 24px"
onclick=subMenu1() onmouseout=hideM2()>与Flash媲美的JS左侧导航菜单

style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 240px; HEIGHT: 24px"
onmouseout=hideM3()>与Flash媲美的JS左侧导航菜单

style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 340px; HEIGHT: 24px"
onmouseout=hideM4()>与Flash媲美的JS左侧导航菜单

style="Z-INDEX: 2; LEFT: -26px; WIDTH: 80px; POSITION: absolute; TOP: 0px; HEIGHT: 80px">

style="Z-INDEX: 2; LEFT: -60px; WIDTH: 30px; POSITION: absolute; TOP: 0px; HEIGHT: 100px">




style="Z-INDEX: 4; LEFT: 80px; WIDTH: 32px; POSITION: absolute; TOP: 0px; HEIGHT: 100%">
style="Z-INDEX: 1; LEFT: -26px; WIDTH: 26px; POSITION: absolute; TOP: 137px; HEIGHT: 304px">
border=0>
  
  
    
  
    
  
    
  
    
  
    
    bgColor=#666699 height=10>
      
      color=#ffff00>B


  



[/html]
[separator]

[code]<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>
[/code]

分享：

扫一扫在手机阅读、分享本文

请发表您的评论