图片的水波倒影效果

Posted 2020-07-25 柯南&

1.概述

    图片有水波倒影的显示效果会让人感到很新颖，例如预习博客网站中有人将自己的照片设置为水波倒影效果。运行本实例，在成功加载页面后，在页面中会显示出水波倒影效果的图片。

 

2.技术要点

主要应用CSS样式中的wave滤镜来实现，其语法格式如下：

Filter:wave(Add=true(false)，Frep=频率，LightStrength=增强光效，phase=偏移量，Strength=强度)

参数说明：

u Add：表示是否把对象按照波纹样式打乱，取值为true或false。

v Freq：表示生成波纹的频率，也就是指定在对象上共需要多少个波纹。

w LightStrength：表示生成波纹增强光效，取值范围在0到100之间。

x phase：用于设置正弦波开始的偏移量，这个值的通用值为0，取值范围在0到100之间。这个值代表开始时，偏移量占波长的百分比，例如值为25时，代表正弦波从90度（360*25%）的方向开始。

 

3.具体实现

实现水波倒影效果javascript函数，关键代码：

<script language="JavaScript">

      function map()   {

            setInterval("img1.filters.wave.phase+=10",100);

      }

      if (document.all)      {

            document.write(‘<Center><img id=img1 src="‘+document.all.mappedimg.src+‘" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30)  blur() flipv()"></Center>‘);

            window.onload = map; 

      }

</script>

 

4.总结

首先是在页面中添加了一幅图片，然后通过自定义JavaScript函数map()动态创建一幅图片，最后在自定义函数中将动态创建的图片的滤镜设置为水波倒影（wave）特效。