[JavaScript]XP菜单效果

应大家所说的,没把注释贴出来!
其实代码很简单,只是些JavaScript而已。
好了,现在修改了一下。
==============
HTML 代码: (直接复制粘贴成.htm就可以看到效果了!)
==============

<html>
    
<head>
        
<title></title>
        
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
        
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
            <!-- 定义默认的style值 -->
        
<style>
            .menu 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 language="javascript">
            
function Menu(objid)
            {
                
var tds=objid.getElementsByTagName('td');        //定义个对像。该对像所指为Table内的所有td。
                
for(var i=0;i<tds.length;i++)         //迭代出所有td
                {
                    
with(tds[i])
                    {
                        onmouseover
=function()              //鼠标移入时
                        {
                            
with(this)
                            {
                                filters[
0].apply();            //虑镜
                                style.background
='#66CCFF';           //背景色
                                style.border
='1px solid #ffffff';          //边框style
                                style.color
='black';             //字体色
                                filters[
0].play();
                            }
                        }
                        onmouseout
=function()        //鼠标移出时
                        {
                            
with(this)
                            {
                                filters[
0].apply(); 
                                style.background
='#336699';              //背景色
                                style.border
='1px solid #336699';           //边框style
                                style.color
='#ffffff';           //字体色
                                filters[
0].play();
                            }
                        }
                    }
                }
            }
        
</script>
    
</head>
    
<body>
        
<table class="menu" id="TestMenu" width="400" cellpadding="1" cellspacing="2" border="0"
            bgcolor
="#336699" align="center">
            
<tr>
                
<td>HD</td>
                
<td>HD</td>
                
<td>HD</td>
                
<td>HD</td>
            
</tr>
            
<tr>
                
<td>HD</td>
                
<td>HD</td>
                
<td>HD</td>
                
<td>HD</td>
            
</tr>
            
<tr>
                
<td>HD</td>
                
<td>HD</td>
                
<td>HD</td>
                
<td>HD</td>
            
</tr>
            
<tr>
                
<td>HD</td>
                
<td>HD</td>
                
<td>HD</td>
                
<td>HD</td>
            
</tr>
        
</table> 
            <!-- 函数调用,参数TestMenu为Table的ID值! -->
        
<script>Menu(TestMenu);</script>
    
</body>
</html>
原文地址:https://www.cnblogs.com/HD/p/99132.html