用JavaScript操作CSS滤镜

第14章用JS操作CSS滤镜－构造一个自己的相册•在前面的章节中，讲解了如何使用JavaScript操作CSS和DOM。在HTML页面中，可以通过JavaScript操作CSS来获得对页面样式强大的动态控制。CSS滤镜能够实现更加复杂的样式，配合JavaScript，可以做出类似Flash的特殊动画效果。14.1示例：自动缩放、有预载功能的相册•现在Internet网络上有很多网站提供一种相册功能，即可以把用户提供的多幅照片自动的顺序切换，并自动调整每幅图片的尺寸，使其大小接近。有些相册照片切换时还会有特殊的切换效果，例如渐隐渐显等。这些相册大多是用Flash制作的，实际上JavaScript配合CSS滤镜也可以完成同样的效果，甚至会更好一些。示例代码14-1.htm就是一个JavaScript实现的相册的例子。•代码.htmJavaScript相册•html•head•metahttp-equiv=content-typecontent=text/html;charset=GB2312/•title14-1JavaScript相册/title•style•*{font-size:12px;font-family:宋体,Arial;}/*规定了所有的字体样式*/•body{overflow:auto;background-color:buttonface;}•#album{width:400px;height:300px;border:1pxsolidblack;position:relative;background-color:white;}•#albumimg{•position:absolute;border-style:none;•filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=1)progid:DXImageTransform.Microsoft.Shadow(Strength=5,Direction=135);•}•/style14.2JavaScript操作CSS界面滤镜•CSS滤镜中的界面滤镜包括“Gradient”和“AlphaImageLoader”。界面滤镜作用在元素内容层和背景层之间的色彩上。14.2.1载入透明“PNG”文件—“AlphaImageLoader”滤镜•CSS的背景属性在操作HTML元素的背景图片时，只能控制其位置、是否重复，却不能控制图片的大小、剪切区域和透明度。目前通常的非“InternetExplorer”浏览器支持“PNG”格式的图片，允许其中的颜色透明，然而“InternetExplorer”浏览器中显示“PNG”图片时无法显示其中的透明色。这些问题可以通过“AlphaImageLoader”滤镜解决。•“AlphaImageLoader”滤镜的CSS语法为：•filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)•“sProperties”是一个属性字符串的组合，各个属性之间使用半角逗号分隔，例如“sProperties”可以为“enabled=true,src=img.jpg”，也可以为“sizingMethod=crop,src=’one.jpg’”。14.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”，即不透明的黑色。14.3JavaScript操作CSS静态滤镜•静态滤镜指的是，按照指定的规则，改变对象的显示内容的滤镜。静态滤镜可以实现透明渐变、模糊、阴影、发光和添加光源等效果。14.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。14.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光效果显示对象。14.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为完全不透明。14.3.4自定义透明色—“Chroma”滤镜•“Chorma”滤镜用于将对象中，指定的颜色显示为透明效果。“Chroma”滤镜的CSS语法为：•filter:progid:DXImageTransform.Microsoft.Chroma(sProperties)•其“sProperties”支持的参数为：•（1）“enabled”，可选，布尔型，标识此滤镜是否激活。默认值是“true”，即滤镜为激活状态。•（2）“color”，可选，字符串型，指定需要显示为透明效果的颜色。其可取值为“#AARRGGBB”格式的颜色字符串。此属性的默认值为“#FF0000FF”。•不建议在8到24位的抖动图片上应用此滤镜，尤其是JPEG类型的文件，否则效果会很难看。14.3.5混合不同的显示—“Compositor”滤镜•“Compositor”滤镜提供非常丰富的功能，用来将两个对象的色彩和透明度，按照指定的规则进行合成。“Compositor”滤镜的CSS语法为：•filter:progid:DXImageTransform.Microsoft.Compositor(sProperties)•其“sProperties”支持的参数只有一个：“function”，规定了合成的模式，可选，整型，取值见表，并列出了各个“function”取值代表的含义。14.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”时，正常建立阴影，对象中的透明部分不会被处理。取值