一个不错的渐显菜单- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个不错的渐显菜单

Javascript: JavaScript 序列化对象实现代码; 替代window.event.srcElement效果的可兼容性的函数; div+css+js模拟tab切换效果事件绑定 IE,firefox兼容; IE和Firefox下event事件杂谈; javascript option onclick事件ie解决方案兼容ie,firefox; javascript demo 基本技巧; 用js实现层随着内容大小动态渐变改变推荐; JS 的应用开发初探(mootools); JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法); JQuery Tips(4) 一些关于提高JQuery性能的Tips; jQuery 淡入淡出、展开收缩菜单实现代码; js控制div及网页相关属性的代码; javascript 翻页测试页(动态创建标签并自动翻页); Js获取table当前tr行的值的代码; IE 上下滚动展示模仿Marquee机制; jQuery解决iframe高度自适应代码; jQuery 连续列表实现代码; 利用jQuery的$.event.fix函数统一浏览器event事件处理; Javascript和Ajax中文乱码吐血版解决方案; js Firefox 加入收藏夹功能代码兼容Firefox 和 IE

No. « ‹ 251 252 253 254 › »

技术文章搜索

关键字

Javascript 中的一个不错的渐显菜单

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 165 ::

收藏到网摘: n/a

javascript支持区号输入的省市二级联动下拉菜单 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 全选提示:你可先修改部分代码,再按运行]

javascript支持区号输入的省市二级联动下拉菜单 javascript之水平横向滚动歌词同步的应用

Javascript 中的 一个不错的渐显菜单

评论 (0) All

Javascript 中的一个不错的渐显菜单