每日更新|TOP排行榜|Tag标签|充值

无忧首页网页模板程序模板建站教程视频教程网页特效图标素材字体下载站长工具站长问答

网页特效代码模板无忧>网页特效>菜单导航特效代码>

收藏分享查看评论菜单导航

Js仿QQ动感菜单_菜单导航特效

查看演示效果

特效Tag：仿QQ 展开菜单添加

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"><a href="/">模板无忧</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 align="center"><a href="mailto:webmaster@k688.com">发信给我哟</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" 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>

所属频道：菜单导航特效/更新时间：2010-05-22

[收藏][报错][返回列表]

相关菜单导航特效：

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些

相关链接：
复制本页链接| 搜索Js仿QQ动感菜单
特效说明：
菜单导航模板-Js仿QQ动感菜单。