JS树形菜单 - 网页特效代码演示

当前位置：网页特效 > 网页特效演示页

菜单导航特效日期时间特效背景图像特效图层样式特效鼠标特效代码页面窗口特效色彩表格特效文字特效代码表单按钮特效计数转换特效游戏网页特效实例网页特效

JS树形菜单 - 网页特效代码演示 - 特效代码运行

以下是HTML网页特效代码，点击运行按钮可查看效果：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>树形菜单2</title>
<style type="text/css">

</style>
<script language="JavaScript">
scores = new Array(20);
var numTotal=0;NS4 = (document.layers) ? 1 : 0;IE4 = (document.all) ? 1 : 0;ver4 = (NS4 || IE4) ? 1 : 0;
if (ver4) {    with (document) {        write("<STYLE TYPE='text/css'>");        
if (NS4) {            write(".parent {position:absolute; visibility:visible}");            
write(".child {position:absolute; visibility:visible}");           
 write(".regular {position:absolute; visibility:visible}")       
  }       
  else {            write(".child {display:none}")        }       
   write("</STYLE>");    }}function getIndex(el) 
   {    ind = null;    for (i=0; i<document.layers.length; i++) {        whichEl = document.layers[i];      
     if (whichEl.id == el) {            ind = i;           
   break;        }    }    return ind;}function arrange() {    nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;    for (i=firstInd+1; i<document.layers.length; i++) {        whichEl = document.layers[i];        
if (whichEl.visibility != "hide") {            whichEl.pageY = nextY;            nextY += whichEl.document.height;        }    }}function initIt(){    if (!ver4) return;    if (NS4) {        for (i=0; i<document.layers.length; i++) {            whichEl = document.layers[i];            if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";       }        arrange();    }    else {        divColl = document.all.tags("DIV");        for (i=0; i<divColl.length; i++) {            whichEl = divColl(i);            if (whichEl.className == "child") whichEl.style.display = "none";        }    }}function expandIt(el) {    if (!ver4) return;    if (IE4) {        whichEl1 = eval(el + "Child");        for(i=1;i<=numTotal;i++){            whichEl = eval(scores[i] + "Child");            if(whichEl!=whichEl1) {                whichEl.style.display = "none";            }        }        whichEl1 = eval(el + "Child");        if (whichEl1.style.display == "none") {            whichEl1.style.display = "block";        }        else {            whichEl1.style.display = "none";        }    }    else {        whichEl = eval("document." + el + "Child");        for(i=1;i<=numTotal;i++){            whichEl = eval("document." + scores[i] + "Child");            if(whichEl!=whichEl1) {                whichEl.visibility = "hide";            }        }        if (whichEl.visibility == "hide") {            whichEl.visibility = "show";        }        else {            whichEl.visibility = "hide";        }        arrange();    }}onload = initIt;
</script>
<script language="JavaScript">

</script>
</head>
<body>

<div id="mainboard" style="position:absolute; left:2px; top:2px; width:120px; height:270px; z-index:3; overflow: hidden; background: #0099FF;" onClick="">
  <div id="item1body" style="position:absolute; left:0; top:0; width:120px; height:160px; z-index:1; overflow: hidden">
    <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
      <tr>
        <td id="item1head" height="20" class="headtd2" onClick="showme(item1body,this)">
          <div align="center">工作室</div>
        </td>
    </tr>
    <tr>
        <td class="bodytd">
         <div id='KB1Parent' >
<a href="#" onClick="expandIt('KB1');">
<IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类一</a></div>
<div id='KB1Child' >
<a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0001</a>
<a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0002</a>
<a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif'  BORDER=0>0003</a>
</div>
<div id='KB2Parent' >
<a href="#" onClick="expandIt('KB2');">
<IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类二</a></div>
<div id='KB2Child' class='child'>
<a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0001</a>
<a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0002</a>
<a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif'  BORDER=0>0003</a></div>
<div id='KB3Parent' ><a href="#" onClick="expandIt('KB3');">
<IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类三</a></div><div id='KB3Child' class='child'>
<a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0001</a>
<a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0002</a>
<a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0003</a></div>
<div id='KB4Parent' ><a href="#" onClick="expandIt('KB4');">
<IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类四</a></div><div id='KB4Child' class='child'>
<a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0001</a>
<a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0002</a>
<a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0003</a></div>
<div id='KB5Parent' >
<a href="#" onClick="expandIt('KB5'); return false">
<IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类五</a></div><div id='KB5Child' class='child'>
<a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0001</a>
<a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0002</a>
<a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif'  BORDER=0>0003</a></div>
<div id='KB6Parent' ><a href="#" onClick="expandIt('KB6'); return false">
<IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类六</a></div><div id='KB6Child' class='child'>
<a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif'  BORDER=0>0001</a>
<a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif'  BORDER=0>0002</a>
<a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif'  BORDER=0>0003</a></div>
        </td>
    </tr>
  </table>
  </div>
  <div id="item2body" style="position:absolute; left:0px; top:160; width:120; height:160; z-index:2; overflow: hidden">
    <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
      <tr>
        <td id="item2head" height="20" class="headtd1" onClick="showme(item2body,this)">
          <div align="center">邮箱</div>
        </td>
      </tr>
      <tr>
        <td class="bodytd">
         <div id='KB7Parent' >
<a href="#" onClick="expandIt('KB7');">
<IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类一</a></div>
<div id='KB7Child' >
<a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif'  BORDER=0>0001</a>
<a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif'  BORDER=0>0002</a>
<a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif'  BORDER=0>0003</a>
</div>
<div id='KB8Parent' >
<a href="#" onClick="expandIt('KB8');">
<IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类二</a></div>
<div id='KB8Child' class='child'>
<a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0001</a>
<a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0002</a>
<a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif'  BORDER=0>0003</a></div>
<SCRIPT>
numTotal=8;
scores[1]='KB1';
scores[2]='KB2';
scores[3]='KB3';
scores[4]='KB4';
scores[5]='KB5';
scores[6]='KB6';
scores[7]='KB7';
scores[8]='KB8'
</SCRIPT>
        </td>
      </tr>
    </table>
    <p class="headtd1"> </p>
  </div>
  <div id="item3body" style="position:absolute; left:0; top:182; width:120px; height:160; z-index:3">
    <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
      <tr>
        <td id="item3head" height="20" class="headtd1" onClick="showme(item3body,this)">
          <div align="center">Q  Q</div>
        </td>
      </tr>
      <tr>
        <td class="bodytd">
          <div align="center">37146743</div>
        </td>
      </tr>
    </table>
  </div>
  <div id="item4body" style="position:absolute; left:0; top:204; width:120px; height:160; z-index:4; overflow: hidden">
    <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
      <tr>
        <td id="item4head" height="20" class="headtd1" onClick="showme(item4body,this)">
          <div align="center">朋友</div>
        </td>
      </tr>
      <tr>
        <td class="bodytd">
          <div align="center">
            <p>小一、旁腾
            </p>
          </div>
        </td>
      </tr>
    </table>
  </div>
  <div id="item5body" style="position:absolute; left:0; top:226; width:120px; height:160; z-index:4; overflow: hidden">
    <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
      <tr>
        <td id="item5head" height="20" class="headtd1" onClick="showme(item5body,this)">
          <div align="center">陌生人</div>
        </td>
      </tr>
      <tr>
        <td class="bodytd">
          <div align="center">
            <p>小虎
              AAP
              
              小伙伴
              小一</p>
          </div>
        </td>
      </tr>
    </table>
  </div>
  
  <div id="item6body" style="position:absolute; left:0; top:248; width:120px; height:160; z-index:4; overflow: hidden">
    <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
      <tr>
        <td id="item6head" height="20" class="headtd1" onClick="showme(item6body,this)">
          <div align="center">版本号</div>
        </td>
      </tr>
      <tr>
        <td class="bodytd">
          <div align="center">
            <p>版本号：1.1
              
              封锁了移动过
              程中的点击事件
              这样不会出现抖
              动现象了。
          </div>
        </td>
      </tr>
    </table>
  </div>
  
</div>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

[提示：可先修改代码再按运行]

当前位置：网页特效 > 网页特效演示页

JS树形菜单 - 网页特效代码演示 - 特效代码运行

刚被其它网友点击的网页特效

搜索查询面板

本月特效排行

本周特效排行

本日特效排行