设为首页 加入收藏
当前位置:首页 > 整站内容 > 特效代码 > 导航特效 > 详细内容
炫彩变色菜单
发布时间:2010-3-19  阅读次数:8505  字体大小: 【】 【】【

<html>

<head>

<style>
/* 先把这个 xmenu 的样式放到css里 */
.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}
</style>

<script>
/*
more javascript from http://www.smallrain.net

这是把事件动作绑定到菜单上的函数
*/
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='#FEBD20'; //这是鼠标移上去时的背景颜色
          style.border='1px solid #ffffff'; //边框
          style.color='black'; //文字颜色
          filters[0].play();
        }
      }
      onmouseout=function(){
        with(this){
          filters[0].apply();
          style.background='#336699'; //这是鼠标离开时的背景颜色
          style.border='1px solid #336699'; //边框
          style.color='#ffffff'; //文字颜色
          filters[0].play();
        }
      }
    }
  }
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|Linkweb.cn/Js|---炫彩变色菜单</title>
</head>

<body>

<!--菜单从这里开始, 注意要把class设置成和css里相同的, 还要为它设一个id-->
<table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#00000" align="center">
  <tr>
    <td>网页特效</td>
    <td>插件下载</td>
    <td>网络学院</td>
    <td>下载基地</td>
    <td>网站联盟</td>
    <td>网站建设</td>
  </tr>
</table>

<script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id</script>

</body>

</html>

预览效果

天猫商城    聚划算    天猫电器城    淘宝旅行    天猫超市    淘宝游戏    天猫品牌特卖    天猫母婴

上一篇:模拟QQ菜单效果 下一篇:滑出式菜单
我要评论
  • 匿名发表
  • [添加到收藏夹]
  • 发表评论:(匿名发表无需登录,已登录用户可直接发表。) 登录状态:未登录
最新评论
所有评论[0]
    暂无已审核评论!

全站链接: 
收录查询
分享按钮