中华网--科技频道--网络教室

Javascript制作水中倒影
冯永曜　　黄山村夫　

　用 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、在网页源代码的<head>与</head>之间加上如下这样一段Javascript程序：
<SCRIPT language="javascript">

</SCRIPT>
　　这段程序没有什么复杂的地方，所以不多解释了。若想使波纹的变化加快，减少setTimeout函数中的定时毫秒数；若要使波纹的变化加大，只要减少step的初值就行了；加大K的允许最大值（在本例中是15）也能起到增大波纹变化范围的效果。
　　4、在<body>标记中加上“onload="movesy()"”事件，以使页面载入时就显示倒影效果。
　　应用本例效果要注意的两点：一是在设置Wave滤镜参数时，不要把add 参数设置为“true”；二是作倒影图片的ID号必须与Javascript程序中调用时的对象名称一致。

　赛迪网　

进入BBS

进入聊天室

关闭窗口

﹣更多本栏目内容
??Windows 2000系统安全设置攻略 ??Dreamweaver编写CSS需要掌握的技巧 ??使用Flash MX过程中的3个小技巧 ??拖IE9网站图标到Win7任务栏精彩好礼任你拿 ??从此不再耗流量？Google离线地图试用 ??给瑞星添加移动存储自动杀毒功能 ??一周壁纸榜单靓丽风景伴您欢度周末 ??金山网络七款软件齐升级炫丽界面贺新春 ??提升网站流量和权重百度热榜排第一 ☉预警：电商促销引钓鱼七夕网购需谨慎

本站检索

网络教室编辑信箱