欢迎来到天天文库
浏览记录
ID:43217787
大小:53.50 KB
页数:27页
时间:2019-10-03
《第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
此文档下载收益归作者所有