鼠标经过导航菜单时颜色改变效果

更新时间：2010年07月14日 19:40:25 作者：

鼠标经过导航菜单的时候，颜色改变，可自定义颜色。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,jb51.net,sky,www.jb51.net,站长特效 网" /> <meta name="description" content="www.jb51.net,脚本之家，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在脚本之家" /> <title>非常酷的网页导航菜单，sky整理收集。</title> <STYLE>  </STYLE> <script> /* 这是把事件动作绑定到菜单上的函数 */ function attachXMenu(objid){ var tds=objid.getElementsByTagName('td'); for(var i=0;i<tds.length;i++){ with(tds[i]){ onmouseover=function(){ with(this){ filters[0].apply(); style.background='#3ea936'; //这是鼠标移上去时的背景颜色 style.border='1px solid #ffffff'; //边框 style.color='#ffffff'; //文字颜色 filters[0].play(); } }//欢迎来到脚本之家，我们的网址是www.jb51.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 onmouseout=function(){ with(this){ filters[0].apply(); style.background='#f6f6f6'; //这是鼠标离开时的背景颜色 style.border='1px solid #ffffff'; //边框 style.color='#333333'; //文字颜色 filters[0].play(); } } } } }//欢迎来到脚本之家，我们的网址是www.jb51.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 </script> </head> <body> <a href="<#ZC_BLOG_HOST#>">脚本之家</a>,站长必备的高质量网页特效和广告代码。jb51.net，站长js特效。<hr>  <div align="center"> <table border="1" width="778" cellpadding="0" style="border-collapse: collapse" height="30" id="table4" bgcolor=#DBDBDB bordercolor="#DBDBDB" cellspacing="0"> <tr> <td> <div align="center"> <table class="xmenu" id="xmenu0" border="0" width="776" cellspacing="3" cellpadding="3" height="30" id="table5"> <tr> <td onclick="window.open('https://www.jb51.net', '_blank');">网站首页</td> <td onclick="window.open('http://jb51.net/?cat=1', '_blank');">站长特效</td> <td onclick="window.open('http://jb51.net/?cat=2', '_blank');">网页特效</td> <td onclick="window.open('http://jb51.net/?cat=11', '_blank');">广告代码</td> <td onclick="window.open('http://jb51.net/', '_blank');">站内关键词</td> <td onclick="window.open('http://jb51.net/', '_blank');">rss订阅</td> <td onclick="window.open('http://jb51.net/', '_blank');">留言本</td> <td onclick="window.open('http://jb51.net/?cat=2', '_blank');">您自定义</td> <td onclick="window.open('http://jb51.net/?cat=2', '_blank');">您自定义</td> </tr> </table><script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id</script> </div> </td> </tr> </table> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

原生JS仿苹果任务栏菜单，放大效果的菜单
原生JS仿苹果任务栏菜单，具备图标放大效果的菜单，原生JavaScript自定的特效，鼠标放到菜单上就把图标放大了，类似使用了jQuery的效果，里面用到了几张菜单图片，这个那就自己下载吧。
2011-08-08
提取自百度有啊的css圆角效果
css圆角效果大家注意下图片，其实就是利用图片+css实现
2009-03-03
带缓冲的收缩与展开内容效果
带缓冲的收缩与展开内容效果...
2007-09-09
JavaScript 双级下拉菜单实现代码
JS+CSS共同结合完成的双级下拉菜单，符合WEB标准，可作为一个标准的实例来掌握。
2009-12-12
鼠标经过导航菜单时颜色改变效果
鼠标经过导航菜单的时候，颜色改变，可自定义颜色。
2010-07-07
CSS TreeMenu 二级树形菜单示例
二级树形菜单示例：CSS TreeMenu ，非常漂亮的树形菜单，用在网站右侧比较合适。
2010-11-11
js实现的XP风格的右键菜单
js实现的XP风格的右键菜单...
2007-03-03
MAC官方菜单纯CSS实现灰色会换色
MAC官方网站的菜单,实际上是看着好看,但看了代码感觉不太实用,因为为了实现这么一个效果代码太繁琐,而且菜单修改起来也极不方便,建议大家以学习的态度阅读源码.
2009-11-11
无限级别的菜单（侧拉菜单）
无限级导航菜单，这个是可以任意加载子菜单，原理比较不错，推荐大家学习
2008-09-09
使用html+css+js实现导航栏滚动渐变效果
这篇文章主要介绍了使用html+css+js实现导航栏滚动渐变效果,鼠标向下拖动滚动条的时候导航栏会随着拖动有一个渐变动画效果,非常的炫酷,快来学习一下如何制作吧
2023-03-03