Js仿QQ动感菜单

2024-09-05 12:19:36

字体：大中小

来源：转载

供稿：网友

Js仿QQ动感菜单，逼真的仿QQ菜单，鼠标点击后展开，不会用css的朋友，这一款是用TABLE，这样你修改起来就更容易了，而且效果还不错哦!

<html><head><title>仿QQ菜单</title><script language="JavaScript">var headHeight = 22;//标题高度var bodyHeight = 160;//母体高度var objcount = 6;//项目个数var step = 6;//移动速度var moving = false;//是否有移动项目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 moveme(obj){	idnumber = parseInt(obj.id.substr(4));	objtop = headHeight * (idnumber - 1);	objbuttom = bodyHeight + headHeight * (idnumber - 2);	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 = headHeight * (countid - 1);				if (countid == idnumber)				{					moveup(obj,objtop,false);					break;				}				else					moveup(obj,objtop,true);				countid++;			}	}	else if ((currenttop <= objtop)  &&  (idnumber < objcount))	{		idnumber++;		countid = objcount;		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 + headHeight * (countid - 2);				if (countid == idnumber)				{					movedown(obj,objbuttom,false);					break;				}				else					movedown(obj,objbuttom,true);				countid--;			}	}}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;}function movedown(obj,objbuttom,ismove){	currenttop = parseInt(obj.style.top);	if (currenttop < objbuttom)	{		obj.style.top = currenttop + step;		setTimeout('movedown('+obj.id+','+objbuttom+','+ismove+')',1)		return;	}	moving = ismove;}// --></script><style type="text/css"></style></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 align="center">博客</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 align="center">发信给我哟</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" 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.          </div>        </td>      </tr>    </table>  </div></div></body></html>

上一篇：JS+Css多级可拖动带动画的滑出式展开菜单

下一篇：Js+Table左侧滑出菜单