第14章 用JS操作CSS滤镜

《第14章 用JS操作CSS滤镜》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、JS从入门到精通第14章用JS操作CSS滤镜－构造一个自己的相册第14章用JS操作CSS滤镜－构造一个自己的相册在前面的章节中，讲解了如何使用JavaScript操作CSS和DOM。在HTML页面中，可以通过JavaScript操作CSS来获得对页面样式强大的动态控制。CSS滤镜能够实现更加复杂的样式，配合JavaScript，可以做出类似Flash的特殊动画效果。本章将介绍：JavaScript操作CSS界面滤镜JavaScript操作CSS静态滤镜JavaScript操作CSS动态滤镜图片的预载和尺寸控制14.1示例：

2、自动缩放、有预载功能的相册现在Internet网络上有很多网站提供一种相册功能，即可以把用户提供的多幅照片自动的顺序切换，并自动调整每幅图片的尺寸，使其大小接近。有些相册照片切换时还会有特殊的切换效果，例如渐隐渐显等。这些相册大多是用Flash制作的，实际上JavaScript配合CSS滤镜也可以完成同样的效果，甚至会更好一些。示例代码14-1.htm就是一个JavaScript实现的相册的例子。14.2JavaScript操作CSS界面滤镜CSS滤镜中的界面滤镜包括“Gradient”和“AlphaImageLoader

3、”。界面滤镜作用在元素内容层和背景层之间的色彩上。14.2.1示例：载入透明“PNG”文件—“AlphaImageLoader”滤镜CSS的背景属性在操作HTML元素的背景图片时，只能控制其位置、是否重复，却不能控制图片的大小、剪切区域和透明度。目前通常的非“InternetExplorer”浏览器支持“PNG”格式的图片，允许其中的颜色透明，然而“InternetExplorer”浏览器中显示“PNG”图片时无法显示其中的透明色。这些问题可以通过“AlphaImageLoader”滤镜解决。代码14-2.htm是一个Ja

4、vaScript操作“AlphaImageLoader”滤镜的示例。14.2.2示例：插入渐变背景—“Gradient”滤镜界面滤镜“Gradient”在元素的内容和背景之间，增加一层渐变的色彩层。其CSS语法为：filter:progid:DXImageTransform.Microsoft.Gradient(sProperties)代码14-3.htm是一个应用“Gradient”滤镜的示例。14.3JavaScript操作CSS静态滤镜静态滤镜指的是，按照指定的规则，改变对象的显示内容的滤镜。静态滤镜可以实现透明渐变

5、、模糊、阴影、发光和添加光源等效果。14.3.1示例：透明渐变效果—“Alpha”滤镜“Alpha”滤镜可以用于调整对象的透明度，并且支持线性或放射性渐变的透明度。“Alpha”滤镜的CSS语法为：filter:progid:DXImageTransform.Microsoft.Alpha(sProperties)代码14-4.htm是一个使用“Alpha”滤镜的简单示例。14.3.2灰度、X光、镜像效果—“BasicImage”滤镜“BasicImage”是一个提供图像的常见处理效果的滤镜，可以对指定对象实现灰度、X光、

6、镜像、透明、旋转和遮罩处理，并允许多个效果的叠加。“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”滤镜用于将对象中，指定

7、的颜色显示为透明效果。“Chroma”滤镜的CSS语法为：filter:progid:DXImageTransform.Microsoft.Chroma(sProperties)14.3.5示例：混合不同的显示—“Compositor”滤镜“Compositor”滤镜提供非常丰富的功能，用来将两个对象的色彩和透明度，按照指定的规则进行合成。“Compositor”滤镜的CSS语法为：filter:progid:DXImageTransform.Microsoft.Compositor(sProperties)其“sProp

8、erties”支持的参数只有一个：“function”，规定了合成的模式，可选，整型，取值见表14-1，并列出了各个“function”取值代表的含义。14.3.6阴影效果—“DropShadow”滤镜和“Shadow”滤镜滤镜“DropShadow”和“Shadow”用于给对象增加一个阴影。“Drop