在HTML页面中，可以通过JavaScript操作CSS来获得对页面样式强大的动态控制。CSS滤镜能够实现更加复杂的样式，配合JavaScript，可以做出类似Flash的特殊动画效果。
现在Internet网络上有很多网站提供一种相册功能，即可以把用户提供的多幅照片自动的顺序切换，并自动调整每幅图片的尺寸，使其大小接近。有些相册照片切换时还会有特殊的切换效果，例如渐隐渐显等。这些相册大多是用Flash制作的，实际上JavaScript配合CSS滤镜也可以完成同样的效果，甚至会更好一些。示例代码14-1.htm就是一个JavaScript实现的相册的例子。
代码.htm JavaScript相册
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>1 JavaScript相册</title>
<style>
* { font-size:12px; font-family:宋体, Arial; } /*规定了所有的字体样式*/
body { overflow:auto; background-color:buttonface; }
#album { width:400px; height:300px; border:1px solid black; position:relative; background-color:white; }
#album img {
position:absolute; border-style:none;
filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=1) progid:DXImageTransform.Microsoft.Shadow(Strength=5,Direction=135);
}
</style>
2 JavaScript操作CSS界面滤镜
CSS滤镜中的界面滤镜包括“Gradient”和“AlphaImageLoader”。界面滤镜作用在元素内容层和背景层之间的色彩上。
2.1 载入透明“PNG”文件—“AlphaImageLoader”滤镜
CSS的背景属性在操作HTML元素的背景图片时，只能控制其位置、是否重复，却不能控制图片的大小、剪切区域和透明度。目前通常的非“Internet Explorer”浏览器支持“PNG”格式的图片，允许其中的颜色透明，然而“Internet Explorer”浏览器中显示“PNG”图片时无法显示其中的透明色。这些问题可以通过“AlphaImageLoader”滤镜解决。
“AlphaImageLoader”滤镜的CSS语法为：
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)
“sProperties”是一个属性字符串的组合，各个属性之间使用半角逗号分隔，例如“sProperties”可以为“enabled=true, src=img.jpg”，也可以为“sizingMethod=crop, src=’one.jpg’”。
2.2 插入渐变背景—“Gradient”滤镜
界面滤镜“Gradient”在元素的内容和背景之间，增加一层渐变的色彩层。其CSS语法为：
filter : progid:DXImageTransform.Microsoft.Gradient (sProperties)
其“sProperties”支持的参数为：
（1）“enabled”，可选，布尔型，标识此滤镜是否激活。默认值是“true”，即滤镜为激活状态。
（2）“startColorStr”，可选，字符串型，设置或返回色彩渐变的开始颜色和透明度。其格式为“#AARRGGBB”。其中“AA”、“RR”、“GG”和“BB”均为16进制的正整数，取值范围为“00”至“FF”。“AA”表示透明度，“00”是完全透明，“FF”是完全不透明。“RR”表示色彩的红色分量，“GG”表示绿色分量，“BB”表示蓝色分量，类似于CSS的颜色设定。此属性的默认值为“#FF0000FF”，即完全不透明的蓝色。
（3）“endColorStr”，可选，字符串型，设置或返回色彩渐变的结束颜色和透明度。其格式与“startColor”相同，默认值为“FF000000”，即不透明的黑色。
静态滤镜指的是，按照指定的规则，改变对象的显示内容的滤镜。静态滤镜可以实现透明渐变、模糊、阴影、发光和添加光源等效果。
3.1 透明渐变效果—“Alpha”滤镜
“Alpha”滤镜可以用于调整对象的透明度，并且支持线性或放射性渐变的透明度。“Alpha”滤镜的CSS语法为：
filter:progid:DXImageTransform.Microsoft.Alpha(sProperties)
其“sProperties”支持的参数为：
（1）“enabled”，可选，布尔型，标识此滤镜是否激活。默认值是“true”，即滤镜为激活状态。
（2）“style”，可选，整型。设置或返回透明渐变的样式，可取值为：“0”默认，透明效果均匀作用于元素对象整体，透明度由“opacity”属性决定；“1”线性渐变，透明度自属性“startX”、“startY”定义的坐标开始，至属性“finishX”、“finishY”定义的坐标结束，透明度由属性“opacity”线性的渐变至“finishOpacity”；“2”圆形放射状渐变，起始点为圆心，结束点为圆周；“3”矩形放射渐变，由对象的边开始，至对象的中心结束。
（3）“opacity”，可选，整型。设置或返回对象透明渐变的开始透明度。取值为0至100的整数，默认为0，即完全透明，100为完全不透明。
（4）“finishOpacity”，可选，整型。设置或返回对象透明渐变的结束透明度。取值为0至100的整数，默认为0，即完全透明，100为完全不透明。
（5）“startX”，可选，整型。设置或返回对象透明渐变的开始位置的横坐标。其数值为对象宽度的百分比，默认值为0。
（6）“startY”，可选，整型。设置或返回对象透明渐变的开始位置的纵坐标。其数值为对象高度的百分比，默认值为0。
（7）“finishX”，可选，整型。设置或返回对象透明渐变的结束位置的横坐标。其数值为对象宽度的百分比，默认值为0。
（8）“finishY”，可选，整型。设置或返回对象透明渐变的结束位置的纵坐标。其数值为对象高度的百分比，默认值为0。
3.2 灰度、X光、镜像效果—“BasicImage”滤镜
“BasicImage”是一个提供图像的常见处理效果的滤镜，可以对指定对象实现灰度、X光、镜像、透明、旋转和遮罩处理，并允许多个效果的叠加。“BasicImage”滤镜的CSS语法为：
filter:progid:DXImageTransform.Microsoft.BasicImage(sProperties)
其“sProperties”支持的参数为：
（1）“enabled”，可选，布尔型，标识此滤镜是否激活。默认值是“true”，即滤镜为激活状态。
（2）“grayScale”，可选，整型，设置或返回对象是否以灰度显示。可取值：“0”默认值，显示对象的原始色彩；“1”以灰度显示对象。
（3）“mirror”，可选，整型，设置或返回对象是否为镜像显示。可取值：“0”默认值，正常显示对象；“1”镜像显示对象。
（4）“opacity”，可选，浮点型，设置对象的透明度。取值范围为0.0至1.0，默认值为1.0，即不透明的黑色，取值为0是表示完全透明。
（5）“XRay”可选，整型，设置或返回对象是否为X光效果显示。可取值：“0”默认值，正常显示对象；“1”以X光效果显示对象。
3.3 模糊效果—“Blur”滤镜
“Blur”滤镜用于产生对象类似运动产生的模糊效果，其CSS语法为：
filter:progid:DXImageTransform.Microsoft.Blur(sProperties)
其“sProperties”支持的参数为：
（1）“enabled”，可选，布尔型，标识此滤镜是否激活。默认值是“true”，即滤镜为激活状态。
（2）“makeShadow”，可选，布尔型，设置或返回是否给对象添加阴影。此属性默认值“false”，按正常色彩显示对象。取值为“true”时，对象内容不作模糊处理，而是将对象内容转化为黑色，并添加模糊效果。调整“ShadowOpacity”属性控制阴影的透明度。
（3）“pixelRadius”，可选，浮点型，设置或返回模糊效果的作用深度。默认单位为像素“px”。此属性取值范围为1.0至100.0，默认值为2.0。取值小于1.0时滤镜失去作用，大于100.0时取值为2.0。
（4）“shadowOpacity”，可选，浮点型，当“makeShadow”设置为“true”时，设置或返回阴影的透明度。取值范围为0.0至1.0，默认值为0.75。0.0为完全透明，1.0为完全不透明。
3.4 自定义透明色—“Chroma”滤镜
“Chorma”滤镜用于将对象中，指定的颜色显示为透明效果。“Chroma”滤镜的CSS语法为：
filter:progid:DXImageTransform.Microsoft.Chroma(sProperties)
其“sProperties”支持的参数为：
（1）“enabled”，可选，布尔型，标识此滤镜是否激活。默认值是“true”，即滤镜为激活状态。
（2）“color”，可选，字符串型，指定需要显示为透明效果的颜色。其可取值为“#AARRGGBB”格式的颜色字符串。此属性的默认值为“#FF0000FF”。
不建议在8到24位的抖动图片上应用此滤镜，尤其是JPEG类型的文件，否则效果会很难看。
3.5 混合不同的显示—“Compositor”滤镜
“Compositor”滤镜提供非常丰富的功能，用来将两个对象的色彩和透明度，按照指定的规则进行合成。“Compositor”滤镜的CSS语法为：
filter:progid:DXImageTransform.Microsoft.Compositor(sProperties)
其“sProperties”支持的参数只有一个：“function”，规定了合成的模式，可选，整型，取值见表，并列出了各个“function”取值代表的含义。
3.6 阴影效果—“DropShadow”滤镜和“Shadow”滤镜
滤镜“DropShadow”和“Shadow”用于给对象增加一个阴影。“DropShadow”滤镜的CSS语法为：
filter:progid:DXImageTransform.Microsoft.DropShadow(sProperties)
其“sProperties”支持的参数为：
（1）“enabled”，可选，布尔型，标识此滤镜是否激活。默认值是“true”，即滤镜为激活状态。
（2）“color”，可选，字符串型，设置或返回阴影的颜色。其可取值为“#AARRGGBB”格式的颜色字符串。此属性的默认值为“#FF0000FF”。
（3）“offX”，可选，整型，设置或返回阴影相对于对象在横坐标上的偏移量。正值向右偏，负值向左偏，其单位为“px”，默认值为“5”。
（4）“offY”，可选，整型，设置或返回阴影相对于对象在纵坐标上的偏移量。正值向下偏，负值向上偏，其单位为“px”，默认值为“5”。
（5）“positive”，可选，布尔型。设置或返回滤镜的阴影模式。取值“true”时，正常建立阴影，对象中的透明部分不会被处理。取值“false”时，自对象中的透明部分建立阴影。
3.7 给对象添加光源—“Light”滤镜
滤镜“Light”用于给对象添加光源效果。其CSS语法为：
filter:progid:DXImageTransform.Microsoft.Light(sProperties)
其“sProperties”支持的参数只有一个，即“enabled”，可选，布尔型，标识此滤镜是否激活。默认值是“true”，即滤镜为激活状态。
3.8 旋转对象—“Matrix”滤镜
滤镜“Matrix”通过矩阵变形，进行对象内容的线性转换，实现缩放、旋转或反转对象的内容，其CSS语法为：
filter:progid:DXImageTransform.Microsoft.Matrix(sProperties)
其“sProperties”支持的参数为：（1）“enabled”，可选，布尔型，标识此滤镜是否激活。默认值是“true”，即滤镜为激活状态。
（2）“SizingMethod”，可选，设置或返回一个字符串标识是否改变容器元素的尺寸来适应改变后的图像。可取值：“clip to original”默认值，容器元素的尺寸不发生改变；“auto expand”容器元素自动改变尺寸以适应改变后的图像。
（3）“FilterType”，可选，字符串型，设置或返回滤镜的执行算法。可取值“bilinear”和“nearest neighbor”。“blinear”为默认值，可以提供高质量的、较平滑的图像；而“nearest neighbor”则提供较快速的处理，可以实现动画显示。
（4）“Dx”，可选，浮点型，设置或返回线性转换的向量增加X，默认值为1.0。当“SizingMethod”取值为“auto expand”时此属性被忽略。
（5）“Dy”，可选，浮点型，设置或返回线性转换的向量增加Y，默认值为1.0。当“SizingMethod”取值为“auto expand”时此属性被忽略。
（6）“M11”，可选，浮点型，设置或返回线性转换时，第一行、第一列的矩阵输入，默认值为“1.0”。
（7）“M12”，可选，浮点型，设置或返回线性转换时，第一行、第二列的矩阵输入，默认值为“0.0”。
（8）“M21”，可选，浮点型，设置或返回线性转换时，第二行、第一列的矩阵输入，默认值为“0.0”。
（9）“M22”，可选，浮点型，设置或返回线性转换时，第二行、第二列的矩阵输入，默认值为“1.0”。
3.9 其他静态滤镜效果
滤镜“Glow”给对象增加辉光，制造发光效果。辉光将添加在对象边界内的内容最外轮廓外，其CSS语法为：
filter:progid:DXImageTransform.Microsoft.Glow(sProperties)
其“sProperties”支持的参数为：
（1）“enabled”，可选，布尔型，标识此滤镜是否激活。默认值是“true”，即滤镜为激活状态。
（2）“color”，可选，字符串型，设置或返回添加辉光的颜色。其格式为“#RRGGBB”。
（3）“strength”，可选，整型，设置或返回辉光向外扩散的距离，单位为像素（“px”）。取值范围为“0”至“255”，默认值为“5”。
动态滤镜是一类用于实现不同内容切换效果的滤镜，因此此类滤镜必须用JavaScript操作。此类滤镜具有共同的使用方法：先调用滤镜的“apply”方法获取初始状态的内容，然后使用JavaScript改变其内容或可见性等，此时这些改变并不会立即显示出来，而是被当作滤镜转换的目标状态，最后调用滤镜的“play”实现动态的转换效果。
4.1 CSS动态滤镜支持的通用属性和方法
所有的动态滤镜具有部分相同的参数：
（1）“enabled”，可选，布尔型，标识此滤镜是否激活。默认值是“true”，即滤镜为激活状态。如果在滤镜的效果播放过程中，设置此属性为“false”，则播放立刻被终止，并显示对象应当显示的内容。
（2）“Duration”，可选，浮点型。设置或返回转换效果持续的时间，单位为“秒”。在滤镜调用“play”方法进行转换特效的播放过程中，此属性变为只读。
所有动态滤镜都具有相同的方法：“apply”、“play”和“stop”。
（1）“apply”方法没有参数，也没有返回值。其作用就是捕获对象内容的初始显示，为转换做准备。当此方法调用后，对象属性或内容的任何改变均不会显示，直到“play”方法被调用。
注意：对于对象的子元素来说，只能改变其可见性（“visibility”）。对子对象的其他任何改变均无法被滤镜捕获，而会立即的显示出来。
（2）“play”方法的语法为：
obj.filters[index].play([iDuration]);
4.2 模拟开关门效果—“Barn”滤镜
“Barn”滤镜使用模拟开关门的效果来转换对象的内容，其CSS语法为：
filter:progid:DXImageTransform.Microsoft.Barn(sProperties)
其“sProperties”支持的参数为：
（1）“motion”，可选，字符串型，设置或返回对象的新内容是自内部开始显示还是自外部开始显示。可能的取值为：“out”，默认值，转换自对象的中心向四周进行，即开门的效果；“in”，转换自对象的四周向中心进行，即关门的效果。
（2）“orientation”，可选，字符串型，设置模拟的开关门效果是横向或是纵向的。可能的取值为：“vertical”，默认值，纵向转换效果；“horizontal”横向转换效果。
4.3 网格推拉转换效果—“CheckerBoard”滤镜
“CheckerBoard”滤镜用于实现类似国际象棋棋盘的网格推拉转换效果，其CSS语法为：
filter:progid:DXImageTransform.Microsoft.CheckerBoard (sProperties)
其“sProperties”支持的参数为：
（1）“squaresX”，可选，整型，设置或返回滤镜转换效果中横向有多少条。取值范围大于或等于“2”，默认值为“12”。
（2）“squaresY”，可选，整型，设置或返回滤镜转换效果中纵向有多少条。取值范围大于或等于“2”，默认值为“10”。
（3）“direction”，可选，字符型，设置或返回网格推拉的方向。可能的取值为：“down”向下；“up”向上；“right”默认值，向右；“left”向左。
4.4 多功能的转换效果—“RevealTrans”滤镜
滤镜“RevealTrans”提供了24中转换效果，其CSS语法为：
progid:DXImageTransform.Microsoft.RevealTrans(sProperties)
其“sProperties”支持的参数为：“transition”，可选，数值型，设置或返回滤镜转换时使用的方式，可能的取值见下表.
4.5 其他动态滤镜效果（一）
“Blinds”滤镜使用模拟百叶窗的效果来转换对象的内容，其CSS语法为：
filter:progid:DXImageTransform.Microsoft.Blinds(sProperties)
其“sProperties”支持的参数为：
（1）“bands”，可选，整型，设置或返回滤镜效果中，显示的百叶窗的栅格数量。其取值范围是“1”至“100”，默认值为“10”。
（2）“Direction”，可选，字符串型，设置或返回百叶窗的开关方向。其可能的取值为：“down”，默认值，向下；“up”向上；“right”向右；“left”向左。
“Fade”滤镜使用渐隐渐显的效果来转换对象的内容，其CSS语法为：
filter:progid:DXImageTransform.Microsoft.Fade(sProperties)
4.6 其他动态滤镜效果（二）
“RadialWipe”滤镜使用放射状擦除效果来转换对象的内容，类似于汽车挡风玻璃上的刮雨刀的效果，其CSS语法为：
filter:progid:DXImageTransform.Microsoft.RadialWipe(sProperties)
其“sProperties”支持的参数为：“wipeStyle”，可选，字符串型，设置或返回此效果的擦除方式，可能的取值为：“clock”，默认值，以对象中心为圆心，自上方开始，顺时针旋转擦除；“wedge”，以对象中心为圆心，自上方开始，同时向两侧旋转擦除；“radial”，以对象左上角为圆心，自上至左旋转擦除。
“RandomBars”滤镜使用随机线条效果来转换对象的内容，其CSS语法为：
filter:progid:DXImageTransform.Microsoft.RandomBars(sProperties)
在页面需要载入很多图片或者需要载入的图片很大时，由于网速影响，常常很难迅速的载入。在很多JavaScript效果中，有着切换图片的操作，如果图片载入造成延时，会影响用户的使用。例如，一个图片链接，在鼠标移入时，用脚本将其变换为另一个图片，而此图片的载入延时会使鼠标最初移入时无法显示。
为了避免此类问题，提高图片的显示速度，可以对图片进行预载。
预载的原理是，脚本用到的图片并不需要在页面最初载入的时候显示，而用户在浏览页面的时候，有着大量的时间可以用于将需要的图片加载到内存中，这样当脚本需要显示相应图片的时候，可以快速的将图片显示出来。
滤镜是CSS提供的一个强有力的效果工具，使用CSS滤镜离不开JavaScript的参与。两者的结合可以实现很多非常复杂的动态或静态效果。需要注意的是，只有“Internet Exporer 5.0”及以上版本的浏览器才支持CSS滤镜，目前绝大多数的非“IE”浏览器不支持CSS滤镜效果。本章讲述的知识点有：
（1）JavaScript操作CSS界面滤镜
（2）JavaScript操作CSS静态滤镜
（3）JavaScript操作CSS动态滤镜
（4）图片的预载和尺寸控制
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
