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

关闭顶部展开顶部

展开边栏关闭边栏

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

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

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

0/5
1
2
3
4
5

查看演示效果

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

织梦DedeCMS视频教程买空间租服务器选网硕互联！ 无忧站长工具,百度权重一键全查!

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动感菜单。

收藏&分享

QQ空间新浪微博腾讯微博人人网开心网百度搜藏复制网址更多...