IE 中的滤镜效果

孤星 [本特效只有使用IE浏览器才能正确显示]

我是初学制作网页,前些天看到在IE中有滤镜的变化,觉得甚是有趣.不敢独自享用,拿出来与大家分享.
IE中支持一些滤镜的变化,其与photoshop的滤镜类似,虽然功能上有所欠缺,但是用在网页的制作中还是可以是网页增色.

滤镜使用很简单,与一般的样式格式相同,在style中加入相应的语句即可,它对文字和图像同样有效.

以下是几种滤镜的效果,可以看到变化还是相当丰富的.

半透明	椭圆	阴影
水平翻转	竖直翻转	模糊
扭曲	反色	黑白

前两种的变化都是应用的Alpha滤镜,它的具体格式为

{Filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,
Style=style,StartX=startX,StartY=startY,FinishX=finishX,
FinishY=finishY)}
opacity: 透明值0(完全透明)~100(完全不透明)
finishopacity: (可选项)0~100
style: 透明度梯度演变的形状特征
0(不发生变化) 1(线性变化) 2(沿半径变化) 3(按矩形变化)
startX: 开始透明度梯度演变的X轴坐标
startY: 开始透明度梯度演变的Y轴坐标
finishX: 完成透明度梯度演变的X轴坐标
finishY: 完成透明度梯度演变的Y轴坐标

第三个是阴影的变化,它采用Shadow滤镜,它的具体格式为

{Filter:Shadow(Color=color,Direction=direction)}
direction: 阴影效果的方向偏移量

模糊和扭曲的的变化分别是应用Blur和Wave滤镜实现的,它们的格式为

Blur Filter
{Filter:Blur(Add=add,Direction=direction,Strength=strength)}
add: 布尔值.真值(非零值)将为图像增加运动非锐化聚焦效果
假值(零值)不将为图像增加运动非锐化聚焦效果
direction: 非锐化聚焦的方向偏移量
strength: 非锐化聚焦扩展的像素数目

Wave Filter
{Filter:Wave(Add=add,Freq=freq,LightStrength=
lightstrength,Phase=phase,Strength=strength)}
add: 布尔值.真值(非零值)将源图像增加到波形过滤处理过图像上
假值(零值)不增加源图像
freq: 整数.视觉扭曲的波浪数
lightstrength: 使用百分比的波形处理亮度,0~100
phase: 正弦波形效果开始偏移量,0~100.50代表180度
strength: 波形效果的强度

至于其它的滤镜您可以查看本网页的源文件即可明白,使用非常简单.

有了这些滤镜,您就可以将一幅简单的图像或文字产生丰富的变化,而不必使用图像处理软件来作特殊效果.

如果将滤镜与脚本语言结合,还可以产生更激动人心的结果,下面就是一个简单的例子,您将鼠标移到图像上, 图像将渐渐恢复原来的面目,而鼠标移开后图像又渐渐的变为半透明.

要实现这个功能并不难,只要给图像一个ID,然后在网页中加入如下的代码即可。
(例子中的ID为Ns1，阿明在99年特刊第4期中，首页“碟评”图片就使用了这个特效。脚本语言采用JavaScript也可以类似实现)

sub Ns1_onMouseOut
doout
end sub

sub doin
dim iTimeID
Ns1.filters.alpha.opacity=Ns1.filters.alpha.opacity+10
if Ns1.filters.alpha.opacity<100 then
iTimeID=setTimeout("doin",100)
end if
end sub

sub doout
dim iTimeID
Ns1.filters.alpha.opacity=Ns1.filters.alpha.opacity-10
if Ns1.filters.alpha.opacity>40 then
iTimeID=setTimeout("doout",100)
end if
end sub
</script>

但是有一点需要说明,滤镜效果只有IE支持,Netscape并不具有此项功能,如果使用Netscape浏览器您将看不到任何变化.:-(