一個不錯的漸顯菜單

2019-11-21 02:06:13

字體：大中小

來源：轉載

供稿：網友

由于此菜單不易靈活改動，圖片量又大，要改欄目和增刪欄目特麻煩，得須改圖片。
       因對本人對此菜單做了大量改動，最終達到的效果是一樣
       原網站那個菜單加上圖片有80多k呢，經修改過后的菜單加上圖片大小只有4k左右，改了過后是不是小了很多呢。
       改動后的優點，便于修改欄目名稱，和增刪欄目，圖片量減少，無論多少欄目只需兩張圖片。
       熟悉js的人還可以把它改得更簡單方便呢，不過我對js還不夠了解，所以就等高手改更簡單的效果吧！
補充一點: 這個效果在FF下不能實現,其它瀏覽器,我也沒有測試,只在IE6.0下測試通過.

<SCRIPT language="javascript"> nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); function nereidFade(object, destOp, rate, delta){ if (!document.all) return     if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);         return;     }     clearTimeout(nereidFadeTimers[object.sourceIndex]);     diff = destOp-object.filters.alpha.opacity;     direction = 1;     if (object.filters.alpha.opacity > destOp){         direction = -1;     }     delta=Math.min(direction*diff,delta);     object.filters.alpha.opacity+=direction*delta;     if (object.filters.alpha.opacity != destOp){         nereidFadeObjects[object.sourceIndex]=object;         nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);     } } </SCRIPT> <style type="text/css">  </style> <div   id="iwvjtn8m0"   class="menu_bg">首頁  <a href="#"><div   id="iwvjtn8m0"   class="menu_cont" style="left: 10px;"    onmouseover=nereidFade(this,100,5,7) onmouseout=nereidFade(this,01,7,5)>首頁</div></a> </div> <div   id="iwvjtn8m0"   class="menu_bg">關于我們  <a href="#"><div   id="iwvjtn8m0"   class="menu_cont" style="left: 90px;"   onmouseover=nereidFade(this,100,5,7) onmouseout=nereidFade(this,01,7,5)>關于我們</div></a> </div> <div   id="iwvjtn8m0"   class="menu_bg">網站介紹  <a href="#"><div   id="iwvjtn8m0"   class="menu_cont" style="left: 170px;"   onmouseover=nereidFade(this,100,5,7) onmouseout=nereidFade(this,01,7,5)>網站介紹</div></a> </div> <div   id="iwvjtn8m0"   class="menu_bg">服務項目  <a href="#"><div   id="iwvjtn8m0"   class="menu_cont" style="left: 250px;"   onmouseover=nereidFade(this,100,5,7) onmouseout=nereidFade(this,01,7,5)>服務項目</div></a> </div> <div   id="iwvjtn8m0"   class="menu_bg">成功案例  <a href="#"><div   id="iwvjtn8m0"   class="menu_cont" style="left: 330px;"   onmouseover=nereidFade(this,100,5,7) onmouseout=nereidFade(this,01,7,5)>成功案例</div></a> </div> <div   id="iwvjtn8m0"   class="menu_bg">聯系我們  <a href="#"><div   id="iwvjtn8m0"   class="menu_cont" style="left: 410px;"   onmouseover=nereidFade(this,100,5,7) onmouseout=nereidFade(this,01,7,5)>聯系我們</div></a> </div> <div   id="iwvjtn8m0"   class="menu_bg">本站論壇  <a href="#"><div   id="iwvjtn8m0"   class="menu_cont" style="left: 490px;"   onmouseover=nereidFade(this,100,5,7) onmouseout=nereidFade(this,01,7,5)>本站論壇</div></a> </div> <div   id="iwvjtn8m0"   class="menu_bg">English  <a href="#"><div   id="iwvjtn8m0"   class="menu_cont" style="left: 570px;"   onmouseover=nereidFade(this,100,5,7) onmouseout=nereidFade(this,01,7,5)>English</div></a> </div>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：javascript之水平橫向滾動歌詞同步的應用

下一篇：javascript支持區號輸入的省市二級聯動下拉菜單