网络时空 | 网页特效

特效说明

幻影般的导航条，鼠标放上去就显示导航条内容

特

效

代

码

<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);

}

self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);

</SCRIPT>
<DIV style="LEFT: 0px; POSITION: absolute; TOP: -30px">
<DIV id=menu01 onmouseover=stopTimerline();menuItemIn() 
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 1; LEFT: 150px; BORDER-LEFT: #000000 1px; WIDTH: 100px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 33px; HEIGHT: 19px; BACKGROUND-COLOR: #000099; layer-background-color: #000099" 
onmouseout=runTimerline() align=center><FONT color=white>主菜单</DIV>
<DIV id=item11 
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()" 
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 2; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 4px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 55px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC" 
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" 
align=center>菜单项一</DIV>
<DIV id=item12 
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()" 
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 3; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 77px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC" 
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" 
align=center>菜单项二</DIV>
<DIV id=item13 
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()" 
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 4; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 99px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC" 
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" 
align=center>菜单项三</DIV>
<DIV id=item14 
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()" 
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 5; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 121px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC" 
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" 
align=center>菜单项四</DIV>
<DIV id=item15 
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()" 
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 143px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC" 
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" 
align=center>菜单项五</DIV>
<DIV id=item16 
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()" 
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 165px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC" 
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" 
align=center>菜单项六</DIV>
<DIV id=item17 
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()" 
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 187px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC" 
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" 
align=center>菜单项七</DIV>
<DIV id=item18 
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()" 
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 209px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC" 
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" 
align=center>菜单项八</DIV>
<DIV id=item19 
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()" 
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 231px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC" 
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" 
align=center>菜单项九</DIV>
<DIV id=item20 
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()" 
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 253px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC" 
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" 
align=center>菜单项十</DIV></DIV>

@_⌒ 特效预览 @_⌒

菜单项一

菜单项二

菜单项三

菜单项四

菜单项五

菜单项六