类似QQ菜单

最新推荐文章于 2021-06-18 08:53:08 发布

hexiongtao

最新推荐文章于 2021-06-18 08:53:08 发布

阅读量613

点赞数

文章标签： qq div border class function table

QQ菜单制作

<html>
<head>
<title>qq</title>
<script type="text/javascript" language="javascript">
var titleHeight=22;//导航头的高度
var bodyHeight=160;//一列菜单的高度
var groupcount=4;//组数
var step=4;//定义步长
function showDiv(obj1,obj2)
{
    for(i=0;i<document.all.tags("td").length;i++)
    {
        if(document.all.tags("td").className=='headtd')
        document.all.tags("td")[i].bgColor='#cccc66';
    }
    obj2.bgColor='#cccc66';
    moveme(obj1);
}
function moveme(obj)
{
    var idnumber=parseInt(obj.id.substr(4));

    objtop=titleHeight*(idnumber-1);
    objbuttom=bodyHeight+titleHeight*(idnumber-1)-22;
    currenttop=parseInt(obj.style.top);//获取当前元素的高度
    if(currenttop==objbuttom)
    {
        countid=1;
        for(i=0;i<document.all.tags("div").length;i++)
        {
            if(document.all.tags("div")[i].id=='item'+countid+'body')
            {
                obj=document.all.tags("div")[i];
                objtop=titleHeight*(countid-1);
                moveup(obj,objtop);
                if(countid==idnumber)
                    break;
                countid++;
            }
        }
    }
    if((currenttop<objbuttom)&&(idnumber<groupcount))
    {
        idnumber++;
        countid=groupcount;
        for(i=document.all.tags("div").length-1;i>=0;i--)
        {
            if(document.all.tags("div")[i].id=='item'+countid+'body')
            {
                   obj=document.all.tags("div")[i];
                   objbuttom=bodyHeight+titleHeight*(countid-2);
                   movedown(obj,objbuttom);
                   if(countid==idnumber)
                    break;
                   countid--;
            }
        }
    }
}
function moveup(obj,objtop)
{
    currenttop=parseInt(obj.style.top);
    if(currenttop>objtop)
    {
        obj.style.top=currenttop-step;
        window.setTimeout('moveup('+obj.id+','+objtop+')',1)
    }
}
function movedown(obj,objbuttom)
{
    currenttop=parseInt(obj.style.top);
    if(currenttop<objbuttom)
    {
        obj.style.top=currenttop+step;
        window.setTimeout('movedown('+obj.id+','+objbuttom+')',1)
    }
}
</script>
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="mainboard" style="position:absolute; left:2px; top:2px; width:120px; height:226px; z-index:3; overflow: hidden; background-color: #cccc66;">
<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="headtd" onclick="showDiv(item1body,this)" bgcolor="#cccc66">
          <div align="center">第一级</div>
        </td>
    </tr>
    <tr>
        <td class="bodytd">
          <div align="center">123</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="headtd" onclick="showDiv(item2body,this)" bgcolor="#cccc66">
          <div align="center">第二级</div>
        </td>
      </tr>
      <tr>
        <td class="bodytd">
          <div align="center">456</div>
        </td>
      </tr>
    </table>
    <p class="headtd"> </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="headtd" onclick="showDiv(item3body,this)" bgcolor="#cccc66">
          <div align="center">第三级</div>
        </td>
      </tr>
      <tr>
        <td class="bodytd">
          <div align="center">789</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="headtd" onclick="showDiv(item4body,this)" bgcolor="#cccc66">
          <div align="center">第四级</div>
        </td>
      </tr>
      <tr>
        <td class="bodytd">
          <div align="center">000</div>
        </td>
      </tr>
    </table>
</div>
</div>
</body>
</html>