欢迎来到天天文库
浏览记录
ID:21880804
大小:529.50 KB
页数:24页
时间:2018-10-21
《用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相册
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.
此文档下载收益归作者所有