第14章 用JS操作CSS滤镜.ppt

第14章 用JS操作CSS滤镜－构造一个自己的相册 在前面的章节中，讲解了如何使用JavaScript操作CSS和DOM。在HTML页面中，可以通过JavaScript操作CSS来获得对页面样式强大的动态控制。CSS滤镜能够实现更加复杂的样式，配合JavaScript，可以做出类似Flash的特殊动画效果。 本章将介绍： JavaScript操作CSS界面滤镜 JavaScript操作CSS静态滤镜 JavaScript操作CSS动态滤镜 图片的预载和尺寸控制 14.1 示例：自动缩放、有预载功能的相册 现在Internet网络上有很多网站提供一种相册功能，即可以把用户提供的多幅照片自动的顺序切换，并自动调整每幅图片的尺寸，使其大小接近。有些相册照片切换时还会有特殊的切换效果，例如渐隐渐显等。这些相册大多是用Flash制作的，实际上JavaScript配合CSS滤镜也可以完成同样的效果，甚至会更好一些。示例代码14-1.htm就是一个JavaScript实现的相册的例子。 14.2 JavaScript操作CSS界面滤镜 CSS滤镜中的界面滤镜包括“Gradient”和“AlphaImageLoader”。界面滤镜作用在元素内容层和背景层之间的色彩上。 14.2.1 示例：载入透明“PNG”文件—“AlphaImageLoader”滤镜 CSS的背景属性在操作HTML元素的背景图片时，只能控制其位置、是否重复，却不能控制图片的大小、剪切区域和透明度。目前通常的非“Internet Explorer”浏览器支持“PNG”格式的图片，允许其中的颜色透明，然而“Internet Explorer”浏览器中显示“PNG”图片时无法显示其中的透明色。这些问题可以通过“AlphaImageLoader”滤镜解决。 代码14-2.htm是一个JavaScript操作“AlphaImageLoader”滤镜的示例。 14.2.2 示例：插入渐变背景—“Gradient”滤镜 界面滤镜“Gradient”在元素的内容和背景之间，增加一层渐变的色彩层。其CSS语法为： filter : progid:DXImageTransform.Microsoft.Gradient (sProperties) 代码14-3.htm是一个应用“Gradient”滤镜的示例。 14.3 JavaScript操作CSS静态滤镜 静态滤镜指的是，按照指定的规则，改变对象的显示内容的滤镜。静态滤镜可以实现透明渐变、模糊、阴影、发光和添加光源等效果。 14.3.1 示例：透明渐变效果—“Alpha”滤镜 “Alpha”滤镜可以用于调整对象的透明度，并且支持线性或放射性渐变的透明度。“Alpha”滤镜的CSS语法为： filter:progid:DXImageTransform.Microsoft.Alpha(sProperties) 代码14-4.htm是一个使用“Alpha”滤镜的简单示例。 14.3.2 灰度、X光、镜像效果—“BasicImage”滤镜 “BasicImage”是一个提供图像的常见处理效果的滤镜，可以对指定对象实现灰度、X光、镜像、透明、旋转和遮罩处理，并允许多个效果的叠加。“BasicImage”滤镜的CSS语法为： filter:progid:DXImageTransform.Microsoft.BasicImage(sProperties) 14.3.3 模糊效果—“Blur”滤镜 “Blur”滤镜用于产生对象类似运动产生的模糊效果，其CSS语法为： filter:progid:DXImageTransform.Microsoft.Blur(sProperties) 14.3.4 自定义透明色—“Chroma”滤镜 “Chorma”滤镜用于将对象中，指定的颜色显示为透明效果。“Chroma”滤镜的CSS语法为： filter:progid:DXImageTransform.Microsoft.Chroma(sProperties) 14.3.5 示例：混合不同的显示—“Compositor”滤镜 “Compositor”滤镜提供非常丰富的功能，用来将两个对象的色彩和透明度，按照指定的规则进行合成。“Compositor”滤镜的CSS语法为： filter:progid:DXImageTransform.Microsof