用JavaScript操作CSS滤镜.pptVIP

第14章 用JS操作CSS滤镜－构造一个自己的相册 在前面的章节中，讲解了如何使用JavaScript操作CSS和DOM。在HTML页面中，可以通过JavaScript操作CSS来获得对页面样式强大的动态控制。CSS滤镜能够实现更加复杂的样式，配合JavaScript，可以做出类似Flash的特殊动画效果。 14.1 示例：自动缩放、有预载功能的相册 现在Internet网络上有很多网站提供一种相册功能，即可以把用户提供的多幅照片自动的顺序切换，并自动调整每幅图片的尺寸，使其大小接近。有些相册照片切换时还会有特殊的切换效果，例如渐隐渐显等。这些相册大多是用Flash制作的，实际上JavaScript配合CSS滤镜也可以完成同样的效果，甚至会更好一些。示例代码14-1.htm就是一个JavaScript实现的相册的例子。 代码.htm JavaScript相册 html head meta http-equiv=content-type content=text/html; charset=GB2312 / title14-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 14.2 JavaScript操作CSS界面滤镜 CSS滤镜中的界面滤镜包括“Gradient”和“AlphaImageLoader”。界面滤镜作用在元素内容层和背景层之间的色彩上。 14.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’”。 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.3 JavaScript