透明度慢慢变化的竖向JS+css菜单

2024-09-05 12:20:00

字体：大中小

来源：转载

供稿：网友

一个CSS结合JavaScript共同完成的垂直菜单，鼠标放上去对应的菜单项的透明度会慢慢发生变化，字体的颜色也会慢慢改变，整体效果不错，请运行一下看效果。

<title>半透明菜单</title><style>. tds {  background-Color:silver;  width:100;  height:20;  text-align:center;  border:1px solid gray;  font-size:12PX;  filter:alpha(opacity=45);  -moz-opacity:45%;  cursor:crosshair; }</style><SCRIPT LANGUAGE="JavaScript"></script><script language="javascript">nOpac = 50nPlus = 2nMin = 1speed = 30timer = null; timer2 = null;var ie5=(document.all  &&  document.getElementById);var ns6=(!document.all  &&  document.getElementById);function fadeImg2(teller){ apl[teller][1] = "Up"; changes();}function fadeImgend2(teller){ apl[teller][1] = "Down"; setTimeout("changes()",50);}function changes(){ next_loop = true; for (i=0;i 105)       {apl[i][1] = "";}     else     {next_loop = false;}	 nOpac = opacity;  }  else  {  if (apl[i][1] == "Down")  {     opacity -= nMin;     apl[i][0] = opacity;     if (apl[i][0] < 45)       {apl[i][1] = "";}     else     {next_loop = false;}	 nOpac = opacity;  }  }  if(ie5){ 	obj.style.filter="alpha(opacity="+opacity+")";    }  if(ns6){    	obj.style.MozOpacity = opacity + '%';   } } if (next_loop == false)  {   timer = setTimeout("changes()",speed);  }  else  {   clearTimeout(timer);  }}var apl = new Array();apl[0] = new Array(45,"");apl[1] = new Array(45,"");apl[2] = new Array(45,"");apl[3] = new Array(45,"");apl[4] = new Array(45,"");apl[5] = new Array(45,"");//expl: apl[6] = new Array(45,"");</script><table cellpadding=0 cellspacing=0 name=link_table id=link_table><tr><td class="tds" onmouseover="fadeImg2(0)" onmouseout="fadeImgend2(0)" onclick="window.location='/';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">源码首页</td></tr><tr><td class="tds" onmouseover="fadeImg2(1)" onmouseout="fadeImgend2(1)" onclick="window.location='/';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">论坛社区</td></tr><tr><td class="tds" onmouseover="fadeImg2(2)" onmouseout="fadeImgend2(2)" onclick="window.location='/';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">博客导航</td></tr><tr><td class="tds" onmouseover="fadeImg2(3)" onmouseout="fadeImgend2(3)" onclick="window.location='/';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">网页特效</td></tr><tr><td class="tds" onmouseover="fadeImg2(4)" onmouseout="fadeImgend2(4)" onclick="window.location='/';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">最新更新</td></tr><tr><td class="tds" onmouseover="fadeImg2(5)" onmouseout="fadeImgend2(5)" onclick="window.location='/';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">下载排行</td></tr></table>

上一篇：JS+CSS多风格自由拖动的菜单窗口

下一篇：符合标准的滑动门（JS+CSS）