Code666 (代码贴、代码片段)

[JavaScript] js动感导航菜单 →→→→→进入此内容的聊天室

来自 , 2019-04-22, 写在 JavaScript, 查看 103 次.
URL http://www.code666.cn/view/6c9882bb
  1. <html>
  2. <head>
  3. <title>动感网站菜单 alixixi.com</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <script language="JavaScript">
  6. var currTimerlinePoint = 0;
  7. var totalTimerlineFrames = 2;
  8. var timerlineTimer;
  9. var leftLine = 50;
  10. var timerIn;
  11. var timerOut;
  12. var timerlineArray = new Array();
  13. timerlineArray[0]='';
  14. timerlineArray[1]='menuItemOut()';
  15. function runTimerline()
  16. {
  17. //if (totalTimerlineFrames > currTimerlinePoint)
  18. //  {
  19. //  eval( timerlineArray[currTimerlinePoint]);
  20. //  currTimerlinePoint ++;
  21. //  }
  22. //else {currTimerlinePoint = 0; clearTimeout(window.timerlineTimer); return false;}
  23. //window.timerlineTimer = setTimeout('runTimerline()',1000);
  24. window.timerlineTimer = setTimeout('menuItemOut()',500);
  25. }
  26. function stopTimerline()
  27. {
  28. clearTimeout(window.timerlineTimer);
  29. //currTimerlinePoint = 0;
  30. }
  31.  
  32. function menuItemIn()
  33. {
  34.     if( leftLine != 150)
  35.      {
  36.   item11.style.pixelLeft += 20; item11.filters.alpha.opacity += 20;
  37.      item12.style.pixelLeft -= 20; item12.filters.alpha.opacity += 20;
  38.      item13.style.pixelLeft += 20; item13.filters.alpha.opacity += 20;
  39.      item14.style.pixelLeft -= 20; item14.filters.alpha.opacity += 20;
  40.      item15.style.pixelLeft += 20; item15.filters.alpha.opacity += 20;
  41.      item16.style.pixelLeft -= 20; item16.filters.alpha.opacity += 20;
  42.      item17.style.pixelLeft += 20; item17.filters.alpha.opacity += 20;
  43.      item18.style.pixelLeft -= 20; item18.filters.alpha.opacity += 20;
  44.      item19.style.pixelLeft += 20; item19.filters.alpha.opacity += 20;
  45.      item20.style.pixelLeft -= 20; item20.filters.alpha.opacity += 20;
  46.      leftLine += 20;
  47.   }
  48.   else
  49.      {
  50.   clearTimeout(window.timerIn);
  51.      return false;
  52.   }
  53.   timerIn=window.setTimeout('menuItemIn()',1);
  54. }
  55. function menuItemOut()
  56. {
  57.    clearTimeout(window.timerIn);
  58.   if (leftLine != 50)
  59.      {
  60.       item11.style.pixelLeft -= 20; item11.filters.alpha.opacity -= 20;
  61.       item12.style.pixelLeft += 20; item12.filters.alpha.opacity -= 20;
  62.       item13.style.pixelLeft -= 20; item13.filters.alpha.opacity -= 20;
  63.       item14.style.pixelLeft += 20; item14.filters.alpha.opacity -= 20;
  64.       item15.style.pixelLeft -= 20; item15.filters.alpha.opacity -= 20;
  65.       item16.style.pixelLeft += 20; item16.filters.alpha.opacity -= 20;
  66.       item17.style.pixelLeft -= 20; item17.filters.alpha.opacity -= 20;
  67.       item18.style.pixelLeft += 20; item18.filters.alpha.opacity -= 20;
  68.       item19.style.pixelLeft -= 20; item19.filters.alpha.opacity -= 20;
  69.       item20.style.pixelLeft += 20; item20.filters.alpha.opacity -= 20;
  70.       leftLine -= 20;
  71.    }
  72.    else
  73.      {
  74.   clearTimeout(window.timerOut);
  75.      return false;
  76.      }
  77.   timerOut=window.setTimeout("menuItemOut()",1);
  78. }
  79. </script>
  80. </head>
  81. <body bgcolor="#FFFFFF" text="#000000">
  82. 应有尽有的网页特效网址：<a href="http://js.alixixi.com">http://js.alixixi.com</a>
  83. <hr />
  84. <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>
  85. <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"
  86. onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
  87. onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://www.alixixi.com/">阿里西西</a></div>
  88. <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"
  89. onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
  90. onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://book.alixixi.com/">电子书籍</a></div>
  91. <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"
  92. onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
  93. onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://js.alixixi.com/">网页特效</a></div>
  94. <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"
  95. onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
  96. onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://down.alixixi.com/">源码下载</a></div>
  97. <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"
  98. onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
  99. onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://cool.alixixi.com/">酷站欣赏</a></div>
  100. <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"
  101. onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
  102. onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://tool.alixixi.com/">站长工具</a></div>
  103. <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"
  104. onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
  105. onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://bbs.alixixi.com/">论坛系统</a></div>
  106. <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"
  107. onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
  108. onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://mb.alixixi.com/">模板素材</a></div>
  109. <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"
  110. onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
  111. onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://www.alixixi.com/">您自定义</a></div>
  112. <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"
  113. onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
  114. onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="http://www.alixixi.com/">您自定义</a></div></div>
  115. </body>
  116. </html>

回复 "js动感导航菜单"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666