使用js实现OICQ菜单效果_oicqjs-优快云博客

本文链接：https://blog.youkuaiyun.com/pqx1993/article/details/8293985

这段代码展示了如何使用JavaScript实现类似OICQ的菜单效果。通过点击菜单头部，相应菜单项会移动显示其详细内容。菜单包括我的办公室、电子邮箱和休闲娱乐三个部分，每个部分有子菜单项。代码中定义了相应的JavaScript函数如`showme`、`moveme`等来处理菜单的显示和移动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function showme(obj1, obj2)
{
if (moving)
return;
moving = true;
for(i=0;i<document.all.tags("td").length;i++)
if (document.all.tags("td")[i].className.indexOf('headtd') == 0)
document.all.tags("td")[i].className = 'headtd1';
obj2.className = 'headtd2';
moveme(obj1);
}

function moveup(obj,objtop,ismove)
{
currenttop = parseInt(obj.style.top);
if (currenttop > objtop)
{
obj.style.top = currenttop - step;
setTimeout('moveup('+obj.id+','+objtop+','+ismove+')',1)
return;
}
moving = ismove;
}

<div id="mainboard" style="position:absolute; left:2px; top:2px; width:120px; height:204px; z-index:3; overflow: hidden; background: #0099FF;" οnclick="">
<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" οnclick="showme(item1body,this)">
          <div align="center"><font color="#ffffff">我的办公室</font></div>
        </td>
    </tr>
    <tr>
        <td class="bodytd" valign=top>
          <div align="center"><br><font color="#ffffff"><a href="#"><font color="#ffffff">公共信息</font></a><br>
          <a href="#"><font color="#ffffff">我的文档</font></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" οnclick="showme(item2body,this)">
          <div align="center"><font color="#ffffff">电子邮箱</font></div>
        </td>
      </tr>
      <tr>
        <td class="bodytd" valign=top>
          <div align="center"><br><font color="#ffffff"><a href="#"><font color="#ffffff">写邮件</font></a><br>
          <a href="#"><font color="#ffffff">收件箱</font></a><br>
          <a href="#"><font color="#ffffff">寄件箱</font></a></div>
        </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" οnclick="showme(item3body,this)">
          <div align="center"><font color="#ffffff">休闲娱乐</font></div>
        </td>
      </tr>
      <tr>
        <td class="bodytd" valign=top>
          <div align="center"><br><a href="#"><font color="#ffffff">法律公文<font color="#ffffff"></a><br>
          <a href="#"><font color="#ffffff">列车时刻<font color="#ffffff"></a><br>
          <a href="#"><font color="#ffffff">航空时刻<font color="#ffffff"></a></div>
        </td>
      </tr>
    </table>
</div>
</div>
</body>