超酷的动感导航菜单

稿源：互联网 2022-06-15 18:23:58 点击： 141832 撤稿纠错

超酷的动感导航菜单，运行代码看看效果，可根据自己需求来自定义。

以下讨论的是和导航菜单相关的超酷的动感导航菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html>
<head>
<title>动感网站菜单 alixixi.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
var currTimerlinePoint = 0;
var totalTimerlineFrames = 2;
var timerlineTimer;
var leftLine = 50;
var timerIn;
var timerOut;
var timerlineArray = new Array();
timerlineArray[0]='';
timerlineArray[1]='menuItemOut()';
function runTimerline()
{
//if (totalTimerlineFrames > currTimerlinePoint)
//  {
//  eval( timerlineArray[currTimerlinePoint]);
//  currTimerlinePoint ++;
//  }
//else {currTimerlinePoint = 0; clearTimeout(window.timerlineTimer); return false;}
//window.timerlineTimer = setTimeout('runTimerline()',1000);
window.timerlineTimer = setTimeout('menuItemOut()',500);
}
function stopTimerline()
{
clearTimeout(window.timerlineTimer);
//currTimerlinePoint = 0;
}
 
function menuItemIn()
{
    if( leftLine != 150)
     {
  item11.style.pixelLeft += 20; item11.filters.alpha.opacity += 20; 
     item12.style.pixelLeft -= 20; item12.filters.alpha.opacity += 20; 
     item13.style.pixelLeft += 20; item13.filters.alpha.opacity += 20; 
     item14.style.pixelLeft -= 20; item14.filters.alpha.opacity += 20;
     item15.style.pixelLeft += 20; item15.filters.alpha.opacity += 20;
     item16.style.pixelLeft -= 20; item16.filters.alpha.opacity += 20;
     item17.style.pixelLeft += 20; item17.filters.alpha.opacity += 20;
     item18.style.pixelLeft -= 20; item18.filters.alpha.opacity += 20;
     item19.style.pixelLeft += 20; item19.filters.alpha.opacity += 20;
     item20.style.pixelLeft -= 20; item20.filters.alpha.opacity += 20;
     leftLine += 20;
  }
  else 
     {
  clearTimeout(window.timerIn);
     return false;
  }
  timerIn=window.setTimeout('menuItemIn()',1);
}
function menuItemOut()
{ 
   clearTimeout(window.timerIn);
  if (leftLine != 50)
     {
      item11.style.pixelLeft -= 20; item11.filters.alpha.opacity -= 20;
      item12.style.pixelLeft += 20; item12.filters.alpha.opacity -= 20;
      item13.style.pixelLeft -= 20; item13.filters.alpha.opacity -= 20;
      item14.style.pixelLeft += 20; item14.filters.alpha.opacity -= 20;
      item15.style.pixelLeft -= 20; item15.filters.alpha.opacity -= 20;
      item16.style.pixelLeft += 20; item16.filters.alpha.opacity -= 20;
      item17.style.pixelLeft -= 20; item17.filters.alpha.opacity -= 20;
      item18.style.pixelLeft += 20; item18.filters.alpha.opacity -= 20;
      item19.style.pixelLeft -= 20; item19.filters.alpha.opacity -= 20;
      item20.style.pixelLeft += 20; item20.filters.alpha.opacity -= 20;
      leftLine -= 20;
   }
   else 
     {
  clearTimeout(window.timerOut);
     return false;
     }
  timerOut=window.setTimeout("menuItemOut()",1);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
应有尽有的网页特效网址：<a href="http://js.alixixi.com">http://js.alixixi.com</a>
<hr />
<div style="position:absolute; left:0px; top:-30px"><div align=center id="menu01" style="position:absolute; left:150px; top:33px; width:100px; height:19px; z-index:1; background-color: #006699; layer-background-color: #000099; border: 1px none #000000;padding-top:3;cursor:hand;font-size:9pt" onmouseover='stopTimerline();menuItemIn()' onmouseout='runTimerline()'><font color=white>主菜单</div>
<div align=center id="item11" style="position:absolute; left:50px; top:55px; width:99px; height:19px; z-index:2; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:4;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://www.alixixi.com/">阿里西西</a></div>
<div align=center id="item12" style="position:absolute; left:250px; top:77px; width:99px; height:19px; z-index:3; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://book.alixixi.com/">电子书籍</a></div>
<div align=center id="item13" style="position:absolute; left:50px; top:99px; width:99px; height:19px; z-index:4; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://js.alixixi.com/">网页特效</a></div>
<div align=center id="item14" style="position:absolute; left:250px; top:121px; width:99px; height:19px; z-index:5; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://down.alixixi.com/">源码下载</a></div>
<div align=center id="item15" style="position:absolute; left:50px; top:143px; width:99px; height:19px; z-index:6; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://cool.alixixi.com/">酷站欣赏</a></div>
<div align=center id="item16" style="position:absolute; left:250px; top:165px; width:99px; height:19px; z-index:6; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://tool.alixixi.com/">站长工具</a></div>
<div align=center id="item17" style="position:absolute; left:50px; top:187px; width:99px; height:19px; z-index:6; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://bbs.alixixi.com/">论坛系统</a></div>
<div align=center id="item18" style="position:absolute; left:250px; top:209px; width:99px; height:19px; z-index:6; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://mb.alixixi.com/">模板素材</a></div>
<div align=center id="item19" style="position:absolute; left:50px; top:231px; width:99px; height:19px; z-index:6; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://www.alixixi.com/">您自定义</a></div>
<div align=center id="item20" style="position:absolute; left:250px; top:253px; width:99px; height:19px; z-index:6; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://www.alixixi.com/">您自定义</a></div></div>
</body>
</html>

关于超酷的动感导航菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2009062356340.shtml方便下次再访问哦。

·上一篇： 隔行变色的js网页特效
·下一篇： js实现的滑动TAB，很简单

超酷的动感导航菜单

文章分类LIST >>返回首页

最新游戏

最新新闻