淡入淡出的网页菜单
周辉腾
2001年 6期
用过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等）的“透明度”逐渐增大，达到“淡出”的效果；反之如果需要“淡入”的话就逐渐减小“透明度”的值，也就实现了“淡入”的过程。下面是一些参考代码和详细说明。
限于篇幅，示例中的HTML部分比较简单，有兴趣的读者不妨参考函数部分给出的说明自行扩展发挥。