会员: 密码:  免费注册 | 忘记密码 | 会员登录 网页功能: 加入收藏 设为首页 网站搜索  
技术文档 > Web开发 > 其他文档
谈Filter在网页中的运用
发表日期:2003-04-30 00:00:00作者: 出处:  


  自W3C公布了样式单(CSS)的标准以来,HTML的每一部分开始以元素的形式出现,并且事件开始真正被引入页面,动态HTML成为了人们讨论的热点。实际上,W3C采用的标准即为微软的DOM,也就是说IE4.0可以更好的支持CSS,并且微软对CSS还进行了许多十分有益地探索,Filter就是一个很好的例子。

  众所周知,Javascript或Vbscript作为脚本语言,其功能是不完善的,有许多高级语言的功能无法实现,如图象的处理功能。Filter是微软对CSS的扩展,与PhotoShop中的滤镜概念相似,它可以用很简单的方法对页面中的文字特效作出特效处理,静态如阴影、模糊的效果,动态如各种淡入淡出效果。下面我来仔细讲解一下(以下内容需在IE4.0下浏览):

静态滤镜:

  要显示滤镜效果,必须先建立一个区域(

),并规定区域的范围(width和height),以下是对一个一般区域的规定:

把此样式单放入到“”标记和“”之间,然后在“”标记间填写正文:
…………

在“
”标记中插入样式单:
style="filter:样式(参数1,参数2,参数3……);"

  以wave滤镜为例,它在垂直方向产生正弦波形,其中参数add表示是否加入原图象(1=是,0=否),freq表示波的数量,phase表示波形的起始偏移量,lightStrength表示光对波纹照射的强度,strength表示波的强度。下表是Filter支持的所有滤镜样式及其参数:

Filter样式

简要说明

支持参数

alpha

设置图片或文字的不透明度

opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength

blur

在指定的方向和位置上产生动感模糊效果

add、direction、strength

chroma

对所选择的颜色进行透明处理

color

dropShadow

在指定的方向和位置上产生阴影

color、offX、offY、positive

flipH

沿水平方向翻转对象

 

flipV

沿垂直方向翻转对象

 

glow

在对象周围上发光

color、strength

gray

将对象以灰度处理

 

invert

逆转对象颜色

 

light

对对象进行模拟光照

 

mask

对对象生成掩膜

color

shadow

沿对象边缘产生阴影

color、direction

wave

在垂直方向产生正弦波形

add、freq、lightStrength、phase、strength

xray

改变对象颜色深度,并绘制黑白图象

 

其中经常出现的color属性可以用十六进制表示(如#ff0000),也可以用rgb()表示(如
rgb(255,0,0)),还可用系统承认的颜色名表示(如red)。
以上就是静态滤镜的全部内容,要注意的是CSS是区分大小写的!

动态滤镜

动态滤镜可以为页面添加动人的淡入淡出、图象转化效果,它可以分为两种blend(混
合)和reveal(显示),前者可以使对象渐渐消失或出现,后者提供了24种图象转化的效
果。对于动态滤镜的调用除去象在静态滤镜中要定义的滤镜类型,参数等等,还用到脚本
语言控制它的状态,首先,在开始一个动态效果之前,先需要进行装备(Apply),然后播
放(Play)动态效果,在动态效果进行中还可以中断动态效果(Stop),以上可以用下面的
方法实现:
对象名.filters(滤镜数值).Apply()
对象名.filters(滤镜数值).Play()
对象名.filters(滤镜数值).Stop()
对于滤镜状态的判断可以通过“对象名.filters(滤镜数值).status”判断,该值为0时,
表示滤镜未执行,为1时,表示滤镜已经完成,为2时表示滤镜在执行中。
在定义filter时,如上面所提到的,可以有混合(“filter:blendTrans(duration=时间数值)”,
duration表示滤镜执行需要的时间,单位为秒)和显示(“filter:revealTrans(duration=时间数
值,transition=过渡类型)”,过渡类型为从0-23的数值)两种,

在Frontpage98中也可以通过设定页面的参数得到,如要在进入页面时要显示某种特效
可以在“”标记前加入“content="revealTrans(Duration=1.0,Transition=22)">”,这个特效在Frantpage98菜单
的“样式/页面特效”中找到,而reveal的24种特效你也可以在其中找到名称,值得一提的
是第24种特效可以随机从前23种之一中选择一种显示。

返回顶部】 【打印本页】 【关闭窗口

关于我们 / 给我留言 / 版权举报 / 意见建议 / 网站编程QQ群   
Copyright ©2003- 2024 Lihuasoft.net webmaster(at)lihuasoft.net 加载时间 0.0039