水中倒影效果制作

作者：黄山村夫  来源：黄山村夫网站

用 Java 的applet控制件可以做出非常漂亮的水中倒影效果，这已是众所周知的事了。但是那样做出来的效果在运行时需要带上一个Java applet控制件，所以体积显得比较大。而本文介绍的这种用Javascrpit做出来的水中倒影效果，却只要增加很少的几行代码就完成了，虽然效果略差一点，但看上去还是挺逼真的，你看上面这种波光粼粼的水中倒影效果，怎么样？

本文例子制作思路：先用一个CSS的FlipV滤镜把图象垂直翻转，再用一个CSS的Wave滤镜产生波纹，然后用一个CSS的Alpha滤镜使图象半透明，最后用一段Javscript程序动态不断地改变CSS的Wave滤镜的“freq”（波纹频率）和“strength”（波纹的振幅）参数，从而模拟出水波粼粼的效果。

制作方法：

1、插入两张相同的图片，位置是一上一下，上面一张作原景，ID号为“img1”.下面一张作倒影用，其ID号为“img2”。

2、在作倒影的图片上加载CSS的FlipV（垂直翻转滤镜）、Wave（波纹滤镜）、Alpha（透明度控制）滤镜，各滤镜的参数如下面的源代码所示。完成设置后的图片标记源代码如下：
〈img src="image/cssp1.jpg" width="200" height="134" ID="img2" style="filter: flipv() wave(add=1,freq=8,lightstrength=80,phase=0,strength=1) alpha(opacity=30); ">

改变alpha滤镜中的opacity参数的值，可以改变图象的透明度，该值越在，图象越不透明，也就是图象越清晰，最大值是100（完全不透明），最小值是0，完全透明，那图象可就一点也看不见了。

3、在网页源代码的与之间加上如下这样一段Javascript程序：

这段程序没有什么复杂的地方，所以不多解释了。若想使波纹的变化加快，减少setTimeout函数中的定时毫秒数；若要使波纹的变化加大，只要减少step的初值就行了；加大K的允许最大值（在本例中是15）也能起到增大波纹变化范围的效果。

4、在标记中加上“οnlοad="wavesy()"”事件，以使页面载入时就显示倒影效果。

应用本例效果要注意的两点：一是在设置Wave滤镜参数时，不要把add 参数设置为“true”；二是作倒影图片的ID号必须与Javascript程序中调用时的对象名称一致。