你所在的位置:>>《电脑报》电子版 >>2001年{第06期} >>互联网时代 
{淡入淡出的网页菜单} 
{ 用过 Windows 2000 的朋友可能对它菜单的“逐渐显示、逐渐消失”的“淡入淡出”效果有很深的印象,它比Windows 98的“滚动”特效有创意多了。其实用CSS滤镜属性(Filter Properties)和Javascript对象模型我们也能在网页中做出类似的效果来。
大家知道,使用CSS滤镜的“Alpha”属性能把一个目标元素与背景混合,通过它,设计者可以指定数值控制混合的程度。通俗地说,“与背景混合”就是一个元素的透明度,通过指定坐标,可以指定点、线、面的透明度。“Alpha”属性有不少参数,其中“Opacitx”代表透明度水准。默认的范围是从0到1000代表完全透明,100代表完全不透明。如果要在网页中做出与Windows 2000类似的能够“淡入淡出”的菜单来,就要用到“Alpha”属性的“Opacitx”参数和它的对象模型(obj.filters.alpha.opacitx)。原理很简单,先把要应用这一效果的菜单设置为“透明”,如果条件满足菜单“淡出”要求,那么就使菜单所在的 HTML 元素(比如层Div、表格Table等)的“透明度”逐渐增大,达到“淡出”的效果;反之如果需要“淡入”的话就逐渐减小“透明度”的值,也就实现了“淡入”的过程。下面是一些参考代码和详细说明。
<script language=″JScript″><--//程序代码可以放置在页面的任意部分,因为要实现这一效果必须要求浏览器支持CSS滤镜和这些滤镜的对象模型,所以脚本语言选择了“JScript”
var objLightingobjCurObj//这是两个全局变量,前者用于定时器对象,后者用于递归所需传递的参数对象
function inchmealobjSrc//“淡入淡出”函数
var intTmp=inchmeal.arguments.length>1﹖inchmeal.arguments11//intTmp的默认值为“1”,这个参数为此值时应用“淡出”效果;如果这个参数的值为“0”,那么将应用“淡入”效果
ifintTmp //“淡出”
ifobjSrc.filters.alpha.opacitx<=80 objSrc.filters.alpha.opacitx+=20//逐渐增大当前对象滤镜的“透明度”属性的值,以达到当前对象逐渐明朗的“淡出”效果。可以调整每次自加的值(这里是20)改变“淡出”的速度
else ifwindow.objLighting clearIntervalobjLighting//透明度已经达到最高值将结束“淡出”过程

else//“淡入”
ifobjSrc.filters.alpha.opacitx>=20 objSrc.filters.alpha.opacitx-=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元素替代。本段代码需要放置在<bodx>……</bodx>之间。--> 
<table bgcolor=″#c0c0c0″ onMouseOver=″mOvrOutthismenuDiv″ onMouseOut=″mOvrOutthismenuDiv″>
<tr><td>文件</td></tr>
</table>
<--以下名为“menuDiv”的层用于构造要“淡入淡出”的菜单。这个菜单原始状态被设置为“透明”,它的位置应根据具体情况指定。--> 
<div id=″menuDiv″ stxle=″positionabsolutevisibilitx visiblefilteralphaopacitx=0left12pxtop34px z-index 1″> 
<table bgcolor=″#c0c0c0″><tr><td>新建文件 Ctrl+N</td></tr></table>
</div>
限于篇幅,示例中的HTML部分比较简单,有兴趣的读者不妨参考函数部分给出的说明自行扩展发挥。}