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 示例：自动缩放、有预载功能的相册,现在Internet网络上
2、有很多网站提供一种相册功能，即可以把用户提供的多幅照片自动的顺序切换，并自动调整每幅图片的尺寸，使其大小接近。有些相册照片切换时还会有特殊的切换效果，例如渐隐渐显等。这些相册大多是用Flash制作的，实际上JavaScript配合CSS滤镜也可以完成同样的效果，甚至会更好一些。示例代码14-1.htm就是一个JavaScript实现的相册的例子。,14.2 JavaScript操作CSS界面滤镜,CSS滤镜中的界面滤镜包括“Gradient”和“AlphaImageLoader”。界面滤镜作用在元素内容层和背景层之间的色彩上。,14.2.1 示例：载入透明“PNG”文件“AlphaImageL
3、oader”滤镜,CSS的背景属性在操作HTML元素的背景图片时，只能控制其位置、是否重复，却不能控制图片的大小、剪切区域和透明度。目前通常的非“Internet Explorer”浏览器支持“PNG”格式的图片，允许其中的颜色透明，然而“Internet Explorer”浏览器中显示“PNG”图片时无法显示其中的透明色。这些问题可以通过“AlphaImageLoader”滤镜解决。代码14-2.htm是一个JavaScript操作“AlphaImageLoader”滤镜的示例。,14.2.2 示例：插入渐变背景“Gradient”滤镜,界面滤镜“Gradient”在元素的内容和背景之间，增
4、加一层渐变的色彩层。其CSS语法为： filter : progid:DXImageTransform.Microsoft.Gradient (sProperties)代码14-3.htm是一个应用“Gradient”滤镜的示例。,14.3 JavaScript操作CSS静态滤镜,静态滤镜指的是，按照指定的规则，改变对象的显示内容的滤镜。静态滤镜可以实现透明渐变、模糊、阴影、发光和添加光源等效果。,14.3.1 示例：透明渐变效果“Alpha”滤镜,“Alpha”滤镜可以用于调整对象的透明度，并且支持线性或放射性渐变的透明度。“Alpha”滤镜的CSS语法为： filter:progid:DX
5、ImageTransform.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”滤镜用于产生对象类似
6、运动产生的模糊效果，其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”滤镜提供非常丰富的功能，用来将两个对象的色彩和透明度，按照指定的规则进行合成。“Compo
7、sitor”滤镜的CSS语法为： filter:progid:DXImageTransform.Microsoft.Compositor(sProperties)其“sProperties”支持的参数只有一个：“function”，规定了合成的模式，可选，整型，取值见表14-1，并列出了各个“function”取值代表的含义。,14.3.6 阴影效果“DropShadow”滤镜和“Shadow”滤镜,滤镜“DropShadow”和“Shadow”用于给对象增加一个阴影。“DropShadow”滤镜的CSS语法为：filter:progid:DXImageTransform.Microsoft.
8、DropShadow(sProperties),“Shadow”滤镜的CSS语法为： filter:progid:DXImageTransform.Microsoft.Shadow(sProperties),14.3.7 示例：给对象添加光源“Light”滤镜,滤镜“Light”用于给对象添加光源效果。其CSS语法为： filter:progid:DXImageTransform.Microsoft.Light(sProperties)其“sProperties”支持的参数只有一个，即“enabled”，可选，布尔型，标识此滤镜是否激活。默认值是“true”，即滤镜为激活状态。 此函数主要通过
9、JavaScript操作其光源，来实现滤镜效果。,14.3.8 示例：旋转对象“Matrix”滤镜,滤镜“Matrix”通过矩阵变形，进行对象内容的线性转换，实现缩放、旋转或反转对象的内容，其CSS语法为： filter:progid:DXImageTransform.Microsoft.Matrix(sProperties),14.3.9 其他静态滤镜效果,滤镜“Glow”给对象增加辉光，制造发光效果。辉光将添加在对象边界内的内容最外轮廓外，其CSS语法为： filter:progid:DXImageTransform.Microsoft.Glow(sProperties),14.4 Jav
10、aScript操作CSS动态滤镜,动态滤镜是一类用于实现不同内容切换效果的滤镜，因此此类滤镜必须用JavaScript操作。此类滤镜具有共同的使用方法：先调用滤镜的“apply”方法获取初始状态的内容，然后使用JavaScript改变其内容或可见性等，此时这些改变并不会立即显示出来，而是被当作滤镜转换的目标状态，最后调用滤镜的“play”实现动态的转换效果。,14.4.1 CSS动态滤镜支持的通用属性和方法,所有的动态滤镜具有部分相同的参数： （1）“enabled” （2）“Duration” 所有动态滤镜都具有相同的方法：“apply”、“play”和“stop”。 动态滤镜对象具有部分相
11、同的属性： （1）“Percent”属性 （2）“status”属性,obj.filtersindex.play(iDuration);,14.4.2 示例：模拟开关门效果“Barn”滤镜,“Barn”滤镜使用模拟开关门的效果来转换对象的内容，其CSS语法为： filter:progid:DXImageTransform.Microsoft.Barn(sProperties),14.4.3 网格推拉转换效果“CheckerBoard”滤镜,“CheckerBoard”滤镜用于实现类似国际象棋棋盘的网格推拉转换效果，其CSS语法为： filter:progid:DXImageTransform.
12、Microsoft.CheckerBoard (sProperties),14.4.4 示例：多功能的转换效果“RevealTrans”滤镜,滤镜“RevealTrans”提供了24中转换效果，其CSS语法为： progid:DXImageTransform.Microsoft.RevealTrans(sProperties),14.4.5 其他动态滤镜效果（一）,“Blinds”滤镜使用模拟百叶窗的效果来转换对象的内容，其CSS语法为： filter:progid:DXImageTransform.Microsoft.Blinds(sProperties),14.4.6 其他动态滤镜效果（二
13、）,“RadialWipe”滤镜使用放射状擦除效果来转换对象的内容，类似于汽车挡风玻璃上的刮雨刀的效果，其CSS语法为： filter:progid:DXImageTransform.Microsoft.RadialWipe(sProperties),14.5 图片预载和尺寸控制,在页面需要载入很多图片或者需要载入的图片很大时，由于网速影响，常常很难迅速的载入。在很多JavaScript效果中，有着切换图片的操作，如果图片载入造成延时，会影响用户的使用。例如，一个图片链接，在鼠标移入时，用脚本将其变换为另一个图片，而此图片的载入延时会使鼠标最初移入时无法显示。为了避免此类问题，提高图片的显示速
14、度，可以对图片进行预载。,14.6 小结,滤镜是CSS提供的一个强有力的效果工具，使用CSS滤镜离不开JavaScript的参与。两者的结合可以实现很多非常复杂的动态或静态效果。需要注意的是，只有“Internet Exporer 5.0”及以上版本的浏览器才支持CSS滤镜，目前绝大多数的非“IE”浏览器不支持CSS滤镜效果。,14.7 常见面试题分析,14.7.1 什么是动态滤镜动态滤镜是一类用于实现不同内容切换效果的滤镜，因此此类滤镜必须用JavaScript操作。此类滤镜具有共同的使用方法：先调用滤镜的“apply”方法获取初始状态的内容，然后使用JavaScript改变其内容或可见性等，此时这些改变并不会立即显示出来，而是被当作滤镜转换的目标状态，最后调用滤镜的“play”实现动态的转换效果。,14.7.2 如何提高图片的显示速度,要提高图片的显示速度，可以对图片进行预载。预载的原理是，脚本用到的图片并不需要在页面最初载入的时候显示，而用户在浏览页面的时候，有着大量的时间可以用于将需要的图片加载到内存中，这样当脚本需要显示相应图片的时候，可以快速的将图片显示出来。,
