页面导航：首页 → 网络编程 → JavaScript → 网页特效 → 导航菜单 → 正文内容

一个不错的渐显菜单

发布：dxy 字体：[增加减小] 类型：转载

由于此菜单不易灵活改动，图片量又大，要改栏目和增删栏目特麻烦，得须改图片。
       因对本人对此菜单做了大量改动，最终达到的效果是一样
       原网站那个菜单加上图片有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 全选提示:你可先修改部分代码,再按运行]

Tags：一个不错的渐显菜单

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：javascript实现的又一个不错的滑动导航效果
下一篇文章：js兼容IE6,IE7菜单高亮显示效果代码

·在百度中搜索关于“一个不错的渐显菜单”相关内容
·在谷歌中搜索关于“一个不错的渐显菜单”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

一个不错的渐显菜单

文章评论

同类文章

最近更新

热点排行

一个不错的渐显菜单

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行