用js操作css滤镜-构造一个自己的相册

《用js操作css滤镜-构造一个自己的相册》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第14章用JS操作CSS滤镜－构造一个自己的相册在前面的章节中，讲解了如何使用JavaScript操作CSS和DOM。在HTML页面中，可以通过JavaScript操作CSS来获得对页面样式强大的动态控制。CSS滤镜能够实现更加复杂的样式，配合JavaScript，可以做出类似Flash的特殊动画效果。14.1示例：自动缩放、有预载功能的相册现在Internet网络上有很多网站提供一种相册功能，即可以把用户提供的多幅照片自动的顺序切换，并自动调整每幅图片的尺寸，使其大小接近。有些相册照片切换时还会有特殊的切换效果，例如渐隐渐显等。这

2、些相册大多是用Flash制作的，实际上JavaScript配合CSS滤镜也可以完成同样的效果，甚至会更好一些。示例代码14-1.htm就是一个JavaScript实现的相册的例子。代码.htmJavaScript相册14.2JavaScript操作CSS界面滤镜CSS滤镜中的界面滤镜包括“Gradient”和“AlphaImageLoader”。界面滤镜作用在元素内容层和背景层之间的色彩上。14.2.1载入透明“PNG”文件—“AlphaImageLoader”滤镜CSS的背景属性在操作HTML元素的背景图片时，只能控制其位置、是否重复，却不能控制图片的大小、剪切区域和透明度。目前通常的非“InternetEx

5、plorer”浏览器支持“PNG”格式的图片，允许其中的颜色透明，然而“InternetExplorer”浏览器中显示“PNG”图片时无法显示其中的透明色。这些问题可以通过“AlphaImageLoader”滤镜解决。“AlphaImageLoader”滤镜的CSS语法为：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)“sProperties”是一个属性字符串的组合，各个属性之间使用半角逗号分隔，例如“sProperties”可以为“ena

6、bled=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）“s

7、tartColorStr”，可选，字符串型，设置或返回色彩渐变的开始颜色和透明度。其格式为“#AARRGGBB”。其中“AA”、“RR”、“GG”和“BB”均为16进制的正整数，取值范围为“00”至“FF”。“AA”表示透明度，“00”是完全透明，“FF”是完全不透明。“RR”表示色彩的红色分量，“GG”表示绿色分量，“BB”表示蓝色分量，类似于CSS的颜色设定。此属性的默认值为“#FF0000FF”，即完全不透明的蓝色。（3）“endColorStr”，可选，字符串型，设置或返回色彩渐变的结束颜色和透明度。其格式与“startCo

8、lor”相同，默认值为“FF000000”，即不透明的黑色。14.3JavaScript操作CSS静态滤镜静态滤镜指的是，按照指定的规则，改变对象的显示内容的滤镜。静态滤镜可以实现透明渐变、模糊、阴影、发光和添加光源等效果。14.3.