如何利用滤镜和过渡创建动态内容

ZDNet软件频道 时间:2003-05-08 作者:BUILDER.COM |  我要评论()
本文关键词:
通过滤镜和过渡,Internet Explorer提供了一些方法,从而能够把图形效果应用到标准的HTML控件上。
本文译自Builder.com,未经许可请勿转载你可能不总是有很多东西加入到Web应用程序最终的图形设计里。但是你是把数据和用户界面捆绑在一起的粘合剂,所以你需要了解现有的用于演示的技术,这一点很重要。

你会很高兴地能够了解到:在缺乏图像资源和Macromedia Shockwave的情况下,有一些方法能够通过编程来自动地提供动态内容。通过滤镜和过渡,Internet Explorer提供了一些方法,从而能够把图形效果应用到标准的HTML控件上。

滤镜能够让你完成某些图像生成的任务,例如确定控件和阴影的透明度。过渡能够让你生成一个从控件里一个内容到另一个内容的动态开关。过渡的一个例子是在隐藏原有内容的同时通过从左卷动到右从而揭开DIV元素新内容。

这些技术的好处是:只需要几行代码,你就能够拥有这个功能,而不需要在图像或者多媒体工具里创建这些效果。而且,你可以直接应用这些效果,而不需要计算需要填进已完成区域的大小。

假设你想要创建一个DIV元素,这个元素还包含有另一个DIV元素,后者会生成常规窗口的标题栏。在微软最近几个版本的Windows里, 缺省的标题栏都是渐进的填充色,蓝色从左边开始,向右逐渐变淡。如果想要创建同样的效果,使用Internet Explorer的滤镜,这是再简单不过的事情了。A显示标题栏是什么样的。Listing A提供了说明这一概念的示例代码。

图A


这段代码的重要部分是第二个DIV元素的STYLE属性。正如你所看到的,Gradient滤镜被应用到了这个元素上。Gradient滤镜的gradientType属性决定着渐变的方向。在这里,1表明是垂直方向的渐变。

startColor和endColor这两个属性所接受的值从0xFF000000到0xFFFFFFFF(4278190080到4294967295)。这些值和AARRGGBB格式相对应,AA是alpha(或者说是透明度的)值,RR是红色值,GG是绿色值,而BB是蓝色值。在HTML声明里,这些值必须是十进制的。DIV的渐变效果会从#000080到#A6CAF0――就和Windows 2000标题栏的渐变色一样。

只要再多写一些代码,外层的DIV所生成的内容就会和常规窗口的类似。提供这种类型的样式就不用为实现相同的任务而提供一个图像了。而且,由于它完全是动态的,所以能够适应任何宽度。

如果更进一步编写你的代码,你就能够根据用户的设置而提供不同的值,就和在内容管理解决方案里的一样。

这种方法的缺点是它被局限到了Internet Explorer 5.5+上,大多数过渡和滤镜也是受限于此。在Internet的解决方案里,你应该遵循标准,不应该把全球的用户限制到一种技术上。

其他资源

访问微软MSDN这一部分,你就能够找到更多关于Internet Explorer过渡和滤镜的信息。这个网站提供了滤镜和过渡的例子,以及处理这些任务的代码。



责任编辑:炒饭

欢迎评论或投稿


百度大联盟认证黄金会员Copyright© 1997- CNET Networks 版权所有。 ZDNet 是CNET Networks公司注册服务商标。
中华人民共和国电信与信息服务业务经营许可证编号:京ICP证010391号 京ICP备09041801号-159
京公网安备:1101082134