js实现波浪效果

思路分析：

• html

该js特效的核心元素为两个波浪形图片，图片所在的div块以不同速度移动即可出现上图所示的海面波浪视觉效果。

分析：两个波浪形图片如下，图片宽度均为1920px

wave-01.png（1920*60）

wave-02.png（1920*60）

在分辨率为1920*1080的显示器下，一张宽1920像素的图片刚好占满屏幕的宽度。两张wave-01.png图片并排则占据1920*2像素，即width为200%，故需设置width>=200%使图片并排不换行，然后设置overflow：hidden使浏览器下方不出现滚动条（设置原因后面会有解释）。此时深蓝色波浪块已定位好，接下来定位浅蓝色波浪块，浅蓝色波浪块同样由两个并排图片块组成，由效果图可知，初始时深浅两个波浪块应重叠：

重叠图

即设置两个波浪块的左偏移量和上偏移量相同，属性设置如下：外层包裹波浪块的div使用相对定位position: relative，相应地，内层两个波浪块均使用绝对定位position: absolute并设置left:0;top:0;此时深浅两个波浪块效果如上图。

html代码如下：

html

• css

css

• js

分析：要实现动态波浪效果，需要使两个波浪块移动，以不同的速度移动效果更好。

下图js代码中定义了一个marqueeScroll()函数表达式，该函数内部有两个方法，一个是Marquee()，一个是setInterval()。

Marquee()方法：当波浪块的左偏移量小于1920px时，则波浪块向左移动1px；否则，将波浪块的左偏移量重置为0。

setInterval() 方法：按照指定的周期（以毫秒计）来调用函数。深蓝色波浪块每40ms左偏移1px，浅蓝色波浪块每20ms左偏移1px。

Marquee方法中出现了scrollLeft() 方法，此方法获取或设置匹配元素相对滚动条左侧的偏移(offset)量。上文提到过设置波浪块属性overflow为hidden，因为外层宽度为100%，波浪块宽度大于200%，如不设置该属性则浏览器会出现滚动条，而测试证明，scrollLeft()方法是只有当内部元素超出父级元素且浏览器底部无滚动条的时候才有效，否则将一直为0，设置了也无效。

波浪动画

波浪块的初始偏移量为0，因此会以设置好的周期每次向左偏移1px，当偏移量达到1920px时，此时屏幕中呈现的是并排的第二张图片，此时将波浪块的偏移量重置为0，保证了连续的波浪效果。