淡入淡出菜单代码
<html>
<head>
<title>淡入淡出菜单</title>
<style>
.up{
BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #ffffff 1px solid;
BORDER-LEFT: #ffffff 1px solid; BORDER-BOTTOM: #666666 1px solid;font-size:9pt;cursor=default
}
.down{
BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #666666 1px solid;
BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #ffffff 1px solid;font-size:9pt;cursor=default
}
.c {
font-size: 9pt; cursor: default
}
.h {
font-size: 9pt; color: #FFFFFF; cursor: default
}
</style>
<script language="javascript">
var intDelay=50; //设置循环定时器的时间间隔
var intInterval=5; //设置菜单项的不透明度每次的累加或是累减值
//点击主菜单处理函数
function MenuClick() {
//如果菜单项已经显示，则此次点击将使菜单开始变淡消失。
//因为这里的display=""意味着display取对象为div时的默认值即block方式
if(LayerMenu.style.display=="")
{
GradientClose(); //菜单项消失
}
else //否则菜单项尚未显示，则显示之
{
LayerMenu.filters.alpha.opacity=0; //设定调用显示菜单项前的菜单项不透明度为0,即完全透明
LayerMenu.style.display=""; //设定当前的div对象的显示方式
GradientShow(); //显示菜单项
}
}
//打开菜单项
function GradientShow(){
LayerMenu.filters.alpha.opacity+=intInterval; //增强菜单的不透明度，此即变浓效果
if(LayerMenu.filters.alpha.opacity<100)
{
setTimeout("GradientShow()",intDelay); //循环定时器，逐次增加不透明度，直到完全显示出来(setTimeout()简单的说就是过多少秒以后调用某个函数)
}
}
// 关闭菜单项
function GradientClose(){
LayerMenu.filters.alpha.opacity-=intInterval; //菜单项的不透明度下降，此即变淡效果
if(LayerMenu.filters.alpha.opacity>0)
{
setTimeout("GradientClose()",intDelay); //循环定时器，逐次降低不透明度，变淡
}
else
{
LayerMenu.style.display="none"; //当菜单完全透明时，不再显示菜单项
}
}
// 变换菜单项的背景色
function ChangeBG(){
oEl=event.srcElement; //获得发生事件的对象
// 更改背景色
if(oEl.style.background!="blue")
{
oEl.style.background="blue";
}
else
{
oEl.style.background="#cccccc";
}
}
// 点击菜单项的处理函数
function ItemClick(){
oEl=event.srcElement; //获得发生事件的对象
oLink=oEl.all.tags("A"); //获得对象中的链接标签对象
if(oLink.length) //如果链接标签对象存在
{
oLink[0].click(); // 打开此链接
GradientClose(); // 关闭菜单项
}
}
</script>
</head>
<body>
<div id="body" style="position:absolute; width:500px; height:300px; top: 77px; left: 25px" onclick="GradientClose();">
</div>
<div style="Position:Absolute;Left:100px;Top:201px;width:170px; height:25px;background-color: #3a82f6; layer-background-color: blue; border: 1px none #000000">
<table border=0 cellpadding=0 cellspacing=0 width=65 height="25">
<tr>
<td class=up onmousedown="this.className='down'" onmouseup="this.className='up'" width="56" onclick="MenuClick()">
<img src="start.gif" width="65" height="25">
</td>
</tr>
</table>
</div>
<div class=up id=LayerMenu style="Position:Absolute;Left: 100px;Top:100px;Display:none;filter:alpha(opacity=0);width: 169px; height: 83px" oncontextmenu="return false" onMouseOver="window.event.cancelBubble = true;">
<table border=0 cellpadding=0 cellspacing=0 bgcolor=#CCCCCC width="100%">
<tr>
<td width=20 valign=bottom bgcolor=navy> </td>
<td> <table border=0 width=100% cellpadding=0 cellspacing=0 onselectstart="return false;" onClick="ItemClick();" onMouseOver="ChangeBG();" onMouseOut="ChangeBG();">
<tr>
<td class=c onMouseOver="this.className='h'" onMouseOut="this.className='c'" height=25>
<a href="#"> </a> 娱乐新闻 </td>
</tr>
<tr>
<td class=c onMouseOver="this.className='h'" onMouseOut="this.className='c'" height=25>
<a href="#"> </a> 体育新闻 </td>
</tr>
<tr>
<td class=c onMouseOver="this.className='h'" onMouseOut="this.className='c'" height=25>
<a href="#"> </a> 社会新闻 </td>
</tr>
<tr>
<td class=c onMouseOver="this.className='h'" onMouseOut="this.className='c'" height=25>
<a href="#"> </a> 军事新闻 </td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
