一个不错的渐显菜单

时间：2021-06-26 08:45:20|栏目：JavaScript代码|点击：次

由于此菜单不易灵活改动，图片量又大，要改栏目和增删栏目特麻烦，得须改图片。
       因对本人对此菜单做了大量改动，最终达到的效果是一样
       原网站那个菜单加上图片有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 class="menu_bg">首页  <a href="#"><div class="menu_cont" style="left: 10px;"    onmouseover=nereidFade(this,100,5,7) onmouseout=nereidFade(this,01,7,5)>首页</div></a> </div> <div class="menu_bg">关于我们  <a href="#"><div class="menu_cont" style="left: 90px;"   onmouseover=nereidFade(this,100,5,7) onmouseout=nereidFade(this,01,7,5)>关于我们</div></a> </div> <div class="menu_bg">网站介绍  <a href="#"><div class="menu_cont" style="left: 170px;"   onmouseover=nereidFade(this,100,5,7) onmouseout=nereidFade(this,01,7,5)>网站介绍</div></a> </div> <div class="menu_bg">服务项目  <a href="#"><div class="menu_cont" style="left: 250px;"   onmouseover=nereidFade(this,100,5,7) onmouseout=nereidFade(this,01,7,5)>服务项目</div></a> </div> <div class="menu_bg">成功案例  <a href="#"><div class="menu_cont" style="left: 330px;"   onmouseover=nereidFade(this,100,5,7) onmouseout=nereidFade(this,01,7,5)>成功案例</div></a> </div> <div class="menu_bg">联系我们  <a href="#"><div class="menu_cont" style="left: 410px;"   onmouseover=nereidFade(this,100,5,7) onmouseout=nereidFade(this,01,7,5)>联系我们</div></a> </div> <div class="menu_bg">本站论坛  <a href="#"><div class="menu_cont" style="left: 490px;"   onmouseover=nereidFade(this,100,5,7) onmouseout=nereidFade(this,01,7,5)>本站论坛</div></a> </div> <div class="menu_bg">English  <a href="#"><div 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需再刷新一下页面才能执行]

上一篇：js定义对象或数组直接量时各浏览器对多余逗号的处理(json)

栏目：JavaScript代码

下一篇：JS实现指定区域的全屏显示功能示例

本文标题：一个不错的渐显菜单

本文地址：http://www.codeinn.net/misctech/148130.html

更多JavaScript代码

JavaScript代码

一个不错的渐显菜单

阅读排行

推荐教程