iceberg

注意 : 本文所述滤镜仅被Internet Explorer 4.0.所支持，就目前来说，它们仅是IE4.0的特殊样式扩展（在IE4.0较早的版本里，它们是ActiveX的控件的一部分）。

这些滤镜提供了一种控制各种物体特殊效果的方法(基本上是页面上的任何物体),而这在以前是需要通过图形才能做到的。而且，通过Script命令，这些特效还可以在不重新装入文档的情况下被动态的改变，这使它们比图片具有较大的优势。最常见的，它们被应用到<IMG> 元素，但还能够被应用到 <DIV> 元素，在 <DIV> 元素中可以依次包含任何的HTML，因而事实上滤镜效果可以被应用到任何内容上。值得注意的是，如果将它们应用到文本块，因文本会换行，所以必须对<DIV>元素定义宽和高属性。

页面转场效果Inter-page/site transitions
IE4.0Internet Explorer 4.0 也支持页面的转场效果，这是通过一个特定的<meta>元素实现的。当你进入或者退出页面时，自动播放一种特殊效果。设置这种效果是通过设定<meta>元素的 CONTENT 属性来实现的。例如：

<META HTTP-EQUIV="Page-Enter" CONTENT="filter:RevealTrans(Duration=3.000, Transition=23)">

这句将使页面在首次显示时延时3秒播放一个随机的页面溶解效果。

注意 : 这个滤镜效果不能在帧结构中应用。

可选的其他滤镜效果有：

Internet Explorer 也支持两种过渡效果(渐显和混合过渡效果).

将滤镜效果应用到物体上的基本语法如下:

STYLE="filter:filtername(fparameter1, fparameter2...)}

where filtername是滤镜的名称，fparamter1...代表每个不同滤镜的相关参数。下面是每个滤镜的详细介绍。

alpha
Alpha滤镜可以对物体设置一定的透明度，既可以是一个图像，也可以是一个块级区域。

STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY=finishY)"

Opacity

透明度级别,范围是0-100, 0代表完全透明 is transparent, 100代表完全不透明.

FinishOpacity

透明区域结束时的透明度级别，从0-100, 0代表完全透明, 100代表完全不透明。

Style

代表透明区域的形状特征，可设置的值是0（统一形状），1（线性），2（矩形），3（长方形）。

StartX

代表透明效果开始时的x坐标X.

StartY

代表透明效果开始时的x坐标Y.

FinishX

代表透明效果结束时的x坐标X.

FinishY

代表透明效果结束时的x坐标Y.

实例如下：

请按图像下面的按钮，观察下面语句的滤镜效果：

filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

blur
Blur滤镜时产生一个画面移动的模糊效果。

语法： STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"

Add

此参数是一个布尔值判断，“true”或“false”。

Direction

模糊效果按照顺时针方向从0 - 315度，每45度为一个单位，默认值是向左的270度。

Strength

代表模糊深度的一个整数值。

实例如下：

请按图像下面的按钮，观察下面语句的滤镜效果：

filter:Blur(Add="1",Direction="45",Strength="5")

chroma
Chroma 可以设置对象中一个指定的颜色为透明色。

语法： STYLE="filter:Chroma(Color = color)"

Color

需要设为透明的颜色值，必须是对象中有的颜色值。

实例如下：

请按图像下面的按钮，观察下面语句的滤镜效果：

filter:Chroma(Color="#FFFFFF")

dropShadow
dropShadow 滤镜是让HTML元件产生下落式的阴影。

语法： STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"

Color

代表投射阴影的颜色。

阴影的水平偏移量。

阴影的垂直偏移量。

Positive

一个布尔值。若值为true（非0），就为非透明像素建立阴影；若值为false(0)，就为透明的像素建立阴影。

实例如下：

请按图像下面的按钮，观察下面语句的滤镜效果：

filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

flipH
水平反转滤警为当前的对象产生一个水平镜像。

语法： STYLE="filter:FlipH"

实例如下：

请按图像下面的按钮，观察下面语句的滤镜效果：

filter:FlipH

flipV
垂直反转滤警为当前的对象产生一个垂直镜像。

语法： STYLE="filter:FlipV"

实例如下：

请按图像下面的按钮，观察下面语句的滤镜效果：

filter:FlipV

glow
Glow滤镜在物件周围产生发光的效果。

语法： STYLE="filter:Glow(Color=color, Strength=strength)"

Color

指定发光的颜色。

Strength

发光强度，从 0-100

实例如下：

请按图像下面的按钮，观察下面语句的滤镜效果：

filter : Glow(Color="#6699CC",Strength="5")

gray
Gray滤镜取消物件的颜色信息，将它转变为灰度图。

语法： STYLE="filter:Gray"

实例如下：

请按图像下面的按钮，观察下面语句的滤镜效果：

filter:Gray

invert
Invert滤镜可以把对象的明度、亮度、饱和度值全部反转。

语法： STYLE="filter:Invert"

实例如下：For example:

请按图像下面的按钮，观察下面语句的滤镜效果：

filter:Invert

light
Light滤镜可以被用来模拟光源在物体上的投影效果。在定义了Light属性后，就可以通过下面的方法之一来改变属性。

AddAmbient(R,G,B,strength)
在图像周围加入泛光，Ambient光是无方向的而且影响整个区域，太阳光发射的就是Ambient光。

语法为：

call object.style.filters.Light(n).addAmbient(R,G,B,strength)

R、G、B决定了Ambient光的颜色数，strength决定了光投射的数量。

AddCone(x1,y1,z1,x2,y2,R,G,B,strength,spread)
在图像上增加一个锥形的光源。Cone光是有方向的而且只影响一指定的区域。

语法为：

call object.style.filters.Light(n).addCone(x1,y1,z1,x2,y2,R,G,B,strength,spread)

x1、y1、z1代表光源的位置，x2、y2、z2代表目标点的位置。R、G、B代表光的颜色数，strength代表光投射的数量。

AddPoint(x,y,z,R,G,B,strength)
在图像上增加一个点光源,点光源就像一个灯泡发的光一样.
语法为：

call object.style.filters.Light(n).addPoint(x,y,z,R,G,B,strength)

x、y、z代表点光源的位置，R、G、B代表光的颜色数，strength代表光投射的数量和范围。

实例如下：

请按下面的按钮，观察下面语句的滤镜效果：

call document.all.divLight.filters.Light(0).addPoint(10,10,100,255,255,255,1000)
call divLight.filters.Light(0).addAmbient(0,0,255,50)

这个例子在文本上增加了一个白色的点光和蓝色的泛光效果。

一旦定义了以上的光源属性，就可以用如下的方法来设置或改变属性。

ChangeColor(lightnumber, r,g,b, fAbsolute)
ChangeColor将改变光源作用到物体上的色彩值。使用lightnumber标识被改变色彩的光源，r,g,b表示改变后的光源的色彩。fAbsoloute 是一个布尔值，如果值为true(非0)，则相关的光源色彩被改变到新的数值，如果值为false(0)则相关的光源色彩被改变为新的数值。

ChangeStrength(lightnumber, strength, fAbsolute)
ChangeStrength 改变光源的强度。

Clear
The Clear 清除所有的光源。

MoveLight(lightnumber, x, y, z, fAbsolute)
The MoveLight 移动光源位置、目标点位置，对泛光等没有影响。

mask
遮照滤镜在物体上增加一个透明的彩色遮照效果。

语法为： STYLE="filter:Mask(Color=color)"

实例如下：

请按下面的按钮，观察下面语句的滤镜效果：

filter:Mask (Color="#FFFFE0")

shadow
Shadow属性可以在指定的方向为物体建立投影。
语法为：filter:Shadow(Color=color, Direction=direction)

Color 代表阴影的颜色，格式为“#RRGGBB” 。
Direction 是设置投影的方向，按照顺时针方向进行，0度代表垂直向上，然后每45度为一个单位。默认值是向左的270度。共8个方向。

实例如下：

请按下面的按钮，观察下面语句的滤镜效果：

filter:Shadow (Color="#6699CC", Direction="135")

wave
Wave属性在对象物体上产生垂直的波形效果。
语法为：filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)

Add

是一个布尔值，表示是否要为对象施加此滤镜效果。true（非0)表示应用，false(0)为不应用。

Freq

代表波形产生的频率。

LightStrength

代表施加在波纹上的光的强度。

Phase

设置波形起始位置的偏移量，数值从0到100，0代表0度，100代表360度，25代表90度。

Strength

代表波纹振幅的大小。

实例如下：

请按下面的按钮，观察下面语句的滤镜效果：

filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

xray
此滤镜将物体的轮廓显现出来并将其加亮。
语法为：

STYLE="filter:Xray"

实例如下：

请按下面的按钮，观察下面语句的滤镜效果：

filter:Xray

Transition Filters

IE4.0Internet Explorer 4.0 还支持另两种类型的效果:Reveal and Blend.正像它们的名字所示,Reveal 滤镜可以使任何的可见物体展现或隐藏,blend 滤镜展现一个淡入淡出的效果。transition performs a fade in/out of a visual object.

RevealTrans Filter
Reveal 滤镜可以使任何的可见物体展现或隐藏。
基本语法为：

STYLE="filter: revealtrans(duration=duration, transition=transitionshape)

Duration 是表示此效果将要发生的时间值。可选的单位有秒或毫秒。
Transition 可以是下面的任一个值：

注意：The Reveal Transition滤镜必须在下列事件中使用的。

Apply
Apply事件用来使一种滤镜效果生。事件虽然可能已经在Style中被定义好了，但它仍旧需要被应用这个Apply事件。

Play
Play事件决定Reveal Transition滤镜变换过程开始，由它来启动变换类型。执行的时间由周期属性来决定。

Stop
停止事件用于停止变换可在变换过程中的任何时候调用。使用下面所描述的状态属性来决定是否执行一个变换。

Properties
Reveal Transition滤镜具有状态和周期属性。Duration属性反应滤镜的一个当前过程，状态反回了一个基于变换状态的当前值。“0”=变换停止，“1”=接受变换，“2”=变换播放。

举例来说。按下在（目前隐藏的）图像下面的按纽开始随机扩散渐变过程。图像最初是隐藏的，滤镜使图像随机地扩散显示出来。

当按纽被按下这个script功能就被执行：

call logo.filters.item(0).Apply()
logo.style.visibility=""
call logo.filters.item(0).Play()

在播放随机溶解变换前重新设置图像的可见度从而执行这个滤镜。

BlendTrans Filter
BlendTrans 滤镜可用于任何物体，通过一个必然的时间段淡入淡出，
基本语法是：

STYLE="filter: blendtrans(duration=duration)"

Duration定义了变换执行的时间。它可以定义为秒或毫秒，例如2.1=2秒，100毫秒。

例如，下面有一个还没有显示的图像在按纽的上面，当这个按纽被点击后，下面的script功能将被执行：

call logo2.filters.item(0).Apply()
logo2.style.display="inline"
logo2.style.visibility=""
call logo2.filters.item(0).Play()

将blendTrans这个滤镜应用于这个图像，使它以in-line元素的方式显示，最后以溶入(渐变)的方式显示，三秒钟为一个阶段。