一组很 cool 的菜单，组合起来非常的棒！

于 2005-10-22 10:14:00 发布
阅读量613 收藏
点赞数
分类专栏： html特效 文章标签： border filter class div function javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zl198183/article/details/513473
版权

<html><title>特效代码</title><body><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);
}

self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);
</script>
<div style="position:absolute; left:0px; top:-47px">
        <div align=center id="menu01" style="position:absolute; left:150px; top:88px; width:100px; height:19px; z-index:1; background-color: #000099; layer-background-color: #000099; border: 1px none #000000;padding-top:3;cursor:hand;font-size:9pt" onMouseOver='stopTimerline();menuItemIn()' onMouseOut='runTimerline()'><font color=white>主菜单</font></div>
        <div align=center id="item11" style="position:absolute; left:50px; top:110px; 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()" class="white">菜单项一</div>
        <div align=center id="item12" style="position:absolute; left:250px; top:132px; 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()" class="white">菜单项二</div>
        <div align=center id="item13" style="position:absolute; left:50px; top:154px; 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()" class="white">菜单项三</div>
        <div align=center id="item14" style="position:absolute; left:250px; top:176px; 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()" class="white">菜单项四</div>
        <div align=center id="item15" style="position:absolute; left:50px; top:198px; 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()" class="white">菜单项五</div>
        <div align=center id="item16" style="position:absolute; left:250px; top:220px; 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()" class="white">菜单项六</div>
        <div align=center id="item17" style="position:absolute; left:50px; top:242px; 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()" class="white">菜单项七</div>
        <div align=center id="item18" style="position:absolute; left:250px; top:264px; 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()" class="white">菜单项八</div>
        <div align=center id="item19" style="position:absolute; left:49px; top:286px; 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()" class="white">菜单项九</div>
        <div align=center id="item20" style="position:absolute; left:250px; top:308px; 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()" class="white">菜单项十</div>
       
      </div>
     
   
</body></html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值