ENGLISH 意见建议 网站地图 网站帮助
广泛智力汇聚   高效成果传播   先进机制培育
联盟首页  |  协同开发  |  开放源码库  |  安全告警  |  开源导航  |  文档中心  |  服务支持  |  共创论坛  |  关于联盟


注册会员 网站帮助
    您的位置 »
    今天是: 2010年11月22日    
项目搜索

完全匹配   
开源软件
软件分类表
新发布软件
其它网站镜像
代码片断
协同开发
文档
论坛
寻求协助
热点项目
站点状态
编译工厂

联系我们
关于联盟
代码片段库:
查看代码片段

浏览 | 提交新的代码片段 | 创建代码包

幻影导航条

类型:
Full Script		 类别:
HTML Manipulation
许可证:
GNU General Public License		 语言:
JavaScript
 
描述:
幻影般的导航条，鼠标放上去就显示导航条内容 来源：http://www.baron.com.cn/javascript/index2.asp?page=6

该代码片段的版本系列:

片段ID 下载版本 提交时间 提交人 删除
4811 1.02003-10-25 17:05cbd001

点击"下载版本"来下载该代码片段.

最新版本的代码片段: 1.0


脚本说明:
把如下代码加入<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="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>

提交新版本

如果您修改了一个代码片段并且觉得很应该让别人共享,您可以把这作为这个代码片段的最新版本提交上来.


联盟团体会员
合作伙伴
© 共创软件联盟 版权所有
联盟服务条款 | 联盟隐私权规则 | 联系我们
电话: (8610)68313388-5949 | 传真: (8610)88377936
京ICP备05056057号