发信人: tedz()
整理人: eagle(2000-12-24 10:02:53), 站内信件
|
谈Filter在网页中的运用
----------------------------------------------------------------------
----------
作者：飞翔鸟 Mars
自W3C公布了样式单（CSS）的标准以来，HTML的每一部分开始以元素的形式
出现，并且事件开始真正被引入页面，动态HTML成为了人们讨论的热点。实际上
，W3C采用的标准即为微软的DOM，也就是说IE4.0可以更好的支持CSS，并且微软
对CSS还进行了许多十分有益地探索，Filter就是一个很好的例子。
众所周知，Javascript或Vbscript作为脚本语言，其功能是不完善的，有许
多高级语言的功能无法实现，如图象的处理功能。Filter是微软对CSS的扩展，与
PhotoShop中的滤镜概念相似，它可以用很简单的方法对页面中的文字特效作出特
效处理，静态如阴影、模糊的效果，动态如各种淡入淡出效果。下面我来仔细讲
解一下（以下内容需在IE4.0下浏览）：
静态滤镜：
要显示滤镜效果，必须先建立一个区域（<div>），并规定区域的范围（wid
th和height），以下是对一个一般区域的规定：
<style>
<!--
div {height:50;width:300;font-size:20pt}
//-->
</style>
把此样式单放入到“<head>”标记和“<body>”之间，然后在“<body>”标记间
填写正文：
<div>…………</div>
在“<div>”标记中插入样式单：
style="filter:样式(参数1,参数2,参数3……);"
以wave滤镜为例，它在垂直方向产生正弦波形，其中参数add表示是否加入原
图象（1=是，0=否），freq表示波的数量，phase表示波形的起始偏移量，light
Strength表示光对波纹照射的强度，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是区分大小写的！
动态滤镜
动态滤镜可以为页面添加动人的淡入淡出、图象转化效果，它可以分为两种blen
d（混
合）和reveal（显示），前者可以使对象渐渐消失或出现，后者提供了24种图象
转化的效
果。对于动态滤镜的调用除去象在静态滤镜中要定义的滤镜类型，参数等等，还
用到脚本
语言控制它的状态，首先，在开始一个动态效果之前，先需要进行装备（Apply）
，然后播
放（Play）动态效果，在动态效果进行中还可以中断动态效果（Stop），以上可
以用下面的
方法实现：
对象名.filters(滤镜数值).Apply()
对象名.filters(滤镜数值).Play()
对象名.filters(滤镜数值).Stop()
对于滤镜状态的判断可以通过“对象名.filters(滤镜数值).status”判断，该值
为0时，
表示滤镜未执行，为1时，表示滤镜已经完成，为2时表示滤镜在执行中。
在定义filter时，如上面所提到的，可以有混合（“filter:blendTrans(durati
on=时间数值)”，
duration表示滤镜执行需要的时间，单位为秒）和显示（“filter:revealTrans
(duration=时间数
值,transition=过渡类型)”，过渡类型为从0－23的数值）两种，
在Frontpage98中也可以通过设定页面的参数得到，如要在进入页面时要显示某种
特效
可以在“<body>”标记前加入“<meta http-equiv="Page-Enter"
content="revealTrans(Duration=1.0,Transition=22)">”，这个特效在Frantp
age98菜单
的“样式/页面特效”中找到，而reveal的24种特效你也可以在其中找到名称，值
得一提的
是第24种特效可以随机从前23种之一中选择一种显示。
--
朋友可以让时间变得短暂,让快乐加倍的膨胀,让悲伤悄悄的引退,让回忆不再平淡.我想我会喜欢这里.
※ 来源:．月光软件站 http://www.moon-soft.com．[FROM: 61.130.131.33]
|
|