在网页中用Wave滤镜实现水波动画效果
青海医学院计算中心 郭俊岭 （810001）
一 Wave 滤镜简介
Wave 是层叠样式单(Cascading Style Sheet，缩写为CSS)
提供的滤镜之一，进行垂直方向的正弦变换。Wave 滤镜在STYLE
中的引用格式是：filter:wave(add=< add >, freq=< freq >,
lightStrenth=< LightStrength >, phase=< phase >, strength=< strength >)，其中，五个参数的意义分别如下：
< add > 取0 或1，add=1 表示在变换的波形上加入原形，add=0
不加入；
< freq > 的值确定Wave
滤镜产生的正弦波的数目，一个正弦波是指一个最小正周期的波形；
< lightStrength >
表示正弦变换后的明暗程度，数值越大越暗；
< phase >
是正弦波的初位相，既不以角度为单位，也不以弧度，而是用100
表示一个最小正周期, 相当于360 度；
< strength >
表示变换强度，其实就是正弦波的振幅，以象素为单位；
例如，Wave 滤镜可以如下形式使用：
STYLE="filter:wave(add=0,freq=1,
lightStrength=50,phase=25,strength=50)"
该滤镜产生1 个正弦波形，初相位90 度，振幅为50
象素，不加入原图象，光照明暗程度为50。
在IE 4.0 下运行下面的DHTML 程序(Wave.html)，你会看到图一所示的正弦波变换效果。如果采用上面例句中的样式，则会产生图二的效果。对比两图，对各个参数的意义可知一二。
< !-- Wave.html -- >
< HTML >
< HEAD >
< TITLE >Wave Filter< /TITLE >
< /HEAD >
< BODY >
< CENTER >
< H1 > 城市夜景< /H1 >< HR >
< IMG SRC="city.gif" WIDTH=200
STYLE="filter:wave(add=1,freq=2,
lightStrength=10,phase=50,strength=100)" >
< !-- 该滤镜产生2个正弦波形，初相位180度，
振幅为100象素，加入原图象，光照明暗程度为10。-- >
< /CENTER >
< /BODY >
< /HTML >
二 用Wave 滤镜实现水波动画效果
尽管Wave
是一个静态滤镜，但是，结合定时器，用脚本语言，在定时器触发时，改变Wave
的参数，就可以产生很好的水波动画效果。整个工作分4 步进行。
1. 为IMG 元素设置Wave 滤镜
建立一个IMG 元素，指定ID 以备脚本调用，用SRC 指定图象，用STYLE
中的filter:wave 设置Wave 滤镜（加入原图象，全图5 个正弦波，初相位0，振幅为10
个象素，光照强度参数为20）：
< IMG ID=imgTrees
STYLE="filter:wave(add=1,freq=5,
lightstrength=20,phase=0,strength=10)"
SRC="Trees.bmp" >
2. 使用setInterval 定时
setInterval 是window
对象的一个方法，其功能是每隔指定时间间隔，调用指定的定时器过程，使用的格式是：window.setInterval("
定时器过程",< 时间间隔 >)，其中，时间间隔的单位是毫秒。
例如：glbTimer=window.setInterval("WaveChange",150)，就是每隔150
毫秒，调用一次WaveChange 过程。
清除由setInterval 设置的定时器，使用window.clearInterval
方法。如要清除由上例设置的定时器glbTimer，使用window.clearInterval(glbTimer)。
3. 在脚本中访问Wave 滤镜属性
在脚本中，用imgTrees.filters.wave 访问所设的Wave 滤镜，下面的VBScript
语句分别访问Wave 滤镜的phase,strength 和Enabled 属性:
|
|
imgTrees.filters.Wave.Phase=glbPhase
''''设置初位相
imgTrees.filters.Wave.Strength=glbStrength ''''设置正弦波的振幅
imgTrees.filters.Wave.Enabled=0 ''''取消Wave滤镜效果
4. 用VBScript 编写脚本
脚本由VBScript 写成，有两个过程。一个是WaveChange()，作为定时器过程，通过对有关属性的赋值，动态改变Wave
滤镜，产生水波动画效果。另一个是document_onClick()，在单击文档时，清除定时器，并使Wave
滤镜无效。定时器在文档装入时设置，脚本中的三个变量也是在此时建立的。详情请见下面的DHTML
程序。
三. DHTML 程序
下面的程序在调入浏览器之后，网页出现了树影婆娑的水波动画效果(
图三)。单击文档，解除定时器，终止Wave 滤镜的作用，恢复原图。
< !--
在网页中用Wave滤镜实现水波动画效果.html
-- >
< HTML >
< HEAD >
< !-- 定义H1标题样式 -- >
< STYLE TYPE="text/css" >
H1{
font-size:32pt;
font-style:italic;
font-weight:bold;
font-family:黑体;
text-align:center;
text-decoration:underline;
color:gold}
< /STYLE >
< SCRIPT LANGUAGE=VBScript >
Option Explicit
dim glbPhase
dim glbStrength
dim glbTimer
Sub waveChange()
if glbStrength=60 then
glbPhase=0
glbStrength=6
else
glbPhase=glbPhase+5
glbStrength=glbStrength+1
End if
''''设置Phase和Strength属性的新值
imgTrees.filters.Wave.Phase=glbPhase
imgTrees.filters.Wave.Strength=glbStrength
End Sub
Sub document_onClick
clearInterval(glbTimer) ''''解除定时
imgTrees.filters.Wave.Enabled=0 ''''使Wave滤镜无效
End Sub
''''设置定时器glbTimer，时间间隔为150毫秒
glbTimer=window.setInterval("waveChange",150)
< /SCRIPT >
< TITLE >在网页中用Wave滤镜实现水波动画效果< /TITLE >
< /HEAD >
< BODY >
< CENTER >
< H1 >树影婆娑< /H1 >
< IMG ID=imgTrees
STYLE="filter:wave(add=1,freq=5,
lightstrength=20,phase=0,strength=10)"
SRC="Trees.bmp" >
< P STYLE="color:red" >
Wave滤镜与setInterval联合使用产生的水波动画效果。< BR >
单击文档，清除定时器，图象复原。< /P >
< /CENTER >
< /BODY >
< /HTML >
本文的DHTML 程序在中文Windows 97 和中文IE 4.0 下运行通过。
文章版权或来源：微电脑世界 |
