用过Windows 2000的朋友可能对它菜单的“逐渐显示、逐渐消失”的“淡入淡出”效果有很深的印象，它比Windows 98的“滚动”特效有创意多了。其实用CSS滤镜属性(Filter Properties)和Javascript对象模型我们也能在网页中做出类似的效果来。
大家知道，使用CSS滤镜的“Alpha”属性能把一个目标元素与背景混合，通过它，设计者可以指定数值控制混合的程度。通俗地说，“与背景混合”就是一个元素的透明度，通过指定坐标，可以指定点、线、面的透明度。“Alpha”属性有不少参数，其中“Opacity”代表透明度水准。默认的范围是从0到1000代表完全透明，100代表完全不透明。如果要在网页中做出与Windows 2000类似的能够“淡入淡出”的菜单来，就要用到“Alpha”属性的“Opacity”参数和它的对象模型(obj.filters.alpha.opacity)。原理很简单，先把要应用这一效果的菜单设置为“透明”，如果条件满足菜单“淡出”要求，那么就使菜单所在的 HTML 元素(比如层Div、表格Table等)的“透明度”逐渐增大，达到“淡出”的效果；反之如果需要“淡入”的话就逐渐减小“透明度”的值，也就实现了“淡入”的过程。下面是一些参考代码和详细说明。
<script language=“JScript”><！--//程序代码可以放置在页面的任意部分，因为要实现这一效果必须要求浏览器支持CSS滤镜和这些滤镜的对象模型，所以脚本语言选择了“JScript”
var objLightingobjCurObj;//这是两个全局变量，前者用于定时器对象，后者用于递归所需传递的参数对象
function inchmeal(objSrc){//“淡入淡出”函数
var intTmp=(inchmeal.arguments.length>1)？inchmeal.arguments[1]:1;//intTmp的默认值为“1”，这个参数为此值时应用“淡出”效果；如果这个参数的值为“0”，那么将应用“淡入”效果
if(intTmp){ //“淡出”
if(objSrc.filters.alpha.opacity<=80) objSrc.filters.alpha.opacity+=20;//逐渐增大当前对象滤镜的“透明度”属性的值，以达到当前对象逐渐明朗的“淡出”效果。可以调整每次自加的值(这里是20)改变“淡出”的速度
else if(window.objLighting) clearInterval(objLighting);//透明度已经达到最高值将结束“淡出”过程
}
else{//“淡入”
if(objSrc.filters.alpha.opacity>=20) objSrc.filters.alpha.opacity-=20;//和上面相反，逐渐减小“透明度”，以达到“淡入”的效果
else if(window.objLighting) clearInterval(objLighting);//透明度达到最小值将结束“淡入”过程
}
}
function mOvrOut(objSrc){//根据鼠标事件调用“淡入淡出”函数，可以根据具体情况编写
objCurObj=(mOvrOut.arguments.length>1)？mOvrOut.arguments[1] objSrc;//默认对象为鼠标经过的对象，可以由第二个参数指定
if(window.objLighting) clearInterval(objLighting);//如果有正在进行的“淡入淡出”过程先清除
if(objSrc.contains(event.toElement))objLighting=setInterval'(inchmeal(objCurObj)'，100);//如果是鼠标经过当前对象的范围，那么开始“淡出”过程。可以调整递归的“周期”(这里是0.1秒)改变“淡出”的速度
else if(objSrc.contains(event.fromElement)) objLighting=setInterval('inchmeal(objCurObj，0)'，100);//反之，即鼠标离开，开始“淡入”过程
}
//--></script>
<！--这个表格用于鼠标经过的时候显示菜单，可以用任何支持“onMouseOver”的HTML元素替代。本段代码需要放置在<body>……</body>之间。-->
<table bgcolor=“#c0c0c0” onMouseOver=“mOvrOut(this，menuDiv)” onMouseOut=“mOvrOut(this，menuDiv)”>
<tr><td>文件</td></tr>
</table>
<！--以下名为“menuDiv”的层用于构造要“淡入淡出”的菜单。这个菜单原始状态被设置为“透明”，它的位置应根据具体情况指定。-->
<div id=“menuDiv” style=“position:absolute;visibility: visible;filter:alpha(opacity=0);left:12px;top:34px; z-index: 1”>
<table bgcolor=“#c0c0c0”><tr><td>新建文件 Ctrl+N</td></tr></table>
</div>
限于篇幅，示例中的HTML部分比较简单，有兴趣的读者不妨参考函数部分给出的说明自行扩展发挥。