淡入淡出的网页菜单

Author: 周辉腾 Date: 2001年 6期
?牐犛霉齏indows 2000的朋友可能对它菜单的“逐渐显示、逐渐消失”的“淡入淡出”效果有很深的印象，它比Windows 98的“滚动”特效有创意多了。其实用CSS滤镜属性（Filter Properties）和Javascript对象模型我们也能在网页中做出类似的效果来。
　　?牐牬蠹抑溃褂肅SS滤镜的“Alpha”属性能把一个目标元素与背景混合，通过它，设计者可以指定数值控制混合的程度。通俗地说，“与背景混合”就是一个元素的透明度，通过指定坐标，可以指定点、线、面的透明度。“Alpha”属性有不少参数，其中“Opacity”代表透明度水准。默认的范围是从0到1000代表完全透明，100代表完全不透明。如果要在网页中做出与Windows 2000类似的能够“淡入淡出”的菜单来，就要用到“Alpha”属性的“Opacity”参数和它的对象模型（obj.filters.alpha.opacity）。原理很简单，先把要应用这一效果的菜单设置为“透明”，如果条件满足菜单“淡出”要求，那么就使菜单所在的 HTML 元素（比如层Div、表格Table等）的“透明度”逐渐增大，达到“淡出”的效果；反之如果需要“淡入”的话就逐渐减小“透明度”的值，也就实现了“淡入”的过程。下面是一些参考代码和详细说明。
　　?牐?<script language=“JScript”><!--//程序代码可以放置在页面的任意部分，因为要实现这一效果必须要求浏览器支持CSS滤镜和这些滤镜的对象模型，所以脚本语言选择了“JScript”
　　?牐爒ar objLightingobjCurObj;//这是两个全局变量，前者用于定时器对象，后者用于递归所需传递的参数对象
　　?牐爁unction inchmeal（objSrc）{//“淡入淡出”函数
　　?牐爒ar intTmp=（inchmeal.arguments.length>1）?inchmeal.arguments[1]:1;//intTmp的默认值为“1”，这个参数为此值时应用“淡出”效果；如果这个参数的值为“0”，那么将应用“淡入”效果
　　?牐爄f（intTmp）{  //“淡出”
　　?牐爄f（objSrc.filters.alpha.opacity<=80） objSrc.filters.alpha.opacity+=20;//逐渐增大当前对象滤镜的“透明度”属性的值，以达到当前对象逐渐明朗的“淡出”效果。可以调整每次自加的值（这里是20）改变“淡出”的速度
　　?牐爀lse if（window.objLighting） clearInterval（objLighting）;//透明度已经达到最高值将结束“淡出”过程
　　?牐爙??
　　?牐爀lse{//“淡入”
　　?牐爄f（objSrc.filters.alpha.opacity>=20） objSrc.filters.alpha.opacity-=20;//和上面相反，逐渐减小“透明度”，以达到“淡入”的效果
　　?牐爀lse if（window.objLighting） clearInterval（objLighting）;//透明度达到最小值将结束“淡入”过程
　　?牐爙??
　　?牐爙??
　　?牐爁unction mOvrOut（objSrc）{//根据鼠标事件调用“淡入淡出”函数，可以根据具体情况编写
　　?牐爋bjCurObj=（mOvrOut.arguments.length>1）?mOvrOut.arguments[1] objSrc;//默认对象为鼠标经过的对象，可以由第二个参数指定
　　?牐爄f（window.objLighting） clearInterval（objLighting）;//如果有正在进行的“淡入淡出”过程先清除
　　?牐爄f（objSrc.contains（event.toElement））?爋bjLighting=setInterval＇（inchmeal（objCurObj）＇，100）;//如果是鼠标经过当前对象的范围，那么开始“淡出”过程。可以调整递归的“周期”（这里是0.1秒）改变“淡出”的速度
　　?牐爀lse 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>
　　?牐犗抻谄纠械腍TML部分比较简单，有兴趣的读者不妨参考函数部分给出的说明自行扩展发挥。