透明度慢慢變化的豎向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）