|
用 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程序：〈SCRIPT language="javascript"〉 〈!-- var k=0; //声明一个计数器变量并赋初值 var step=10; //声明一个变量作为freq参数的初值 function wavesy(){ //使波纹动起来的函数 k++ //计数器计数（加1） if (k<15) step++;else //如果波纹增加了14次，就返回到初始值 {k=0;step=10} img2.filters.wave.freq=step; //改变波纹频率 img2.filters.wave.strength=step+40; //改变波纹振幅 t1=setTimeout("wavesy()",300); //每300毫秒刷新一次。 } --> 〈/SCRIPT〉 这段程序没有什么复杂的地方，所以不多解释了。若想使波纹的变化加快，减少setTimeout函数中的定时毫秒数；若要使波纹的变化加大，只要减少step的初值就行了；加大K的允许最大值（在本例中是15）也能起到增大波纹变化范围的效果。 4、在〈body〉标记中加上“onload="movesy()"”事件，以使页面载入时就显示倒影效果。 应用本例效果要注意的两点：一是在设置Wave滤镜参数时，不要把add 参数设置为“true”；二是作倒影图片的ID号必须与Javascript程序中调用时的对象名称一致。
| 
| 论坛 | 
