156、炫彩变色菜单代码

156、炫彩变色菜单代码

1   把如下代码复制到<head></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>

 

 

 

2    把如下代码复制到<body></body>之间

 

 

 

 

<!--菜单从这里开始, 注意要把class设置成和css里相同的, 还要为它设一个id-->

<table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#00000" align="center">

       <tr>

<td><a href="http://7stk.com" style="color:#FFFFFF">网站首页</a></td>

<td><a href="http://7stk.com/background/index.htm" style="color:#FFFFFF">背景特效</a></td>

<td><a href="http://7stk.com/moban/index.htm" style="color:#FFFFFF">整站模板</a></td>

<td><a href="http://7stk.com/navigation/index.htm" style="color:#FFFFFF">导航特效</a></td>

<td><a href="http://7stk.com/img/index.htm" style="color:#FFFFFF">图片特效</a></td>

<td><a href="http://7stk.com/text/index.htm" style="color:#FFFFFF">文本特效</a></td>

       </tr>

</table>

 

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

 

Write a comment

Comments: 0