js实现波浪效果

  • 时间:2018-06-16 23:02 作者:web前端经验分享 来源:web前端经验分享 阅读:489
  • 扫一扫,手机访问
摘要:先看效果图:视频加载中...思路分析:html该js特效的核心元素为两个波浪形图片,图片所在的div块以不同速度移动就可出现上图所示的海面波浪视觉效果。分析:两个波浪形图片如下,图片宽度均为1920pxwave-01.png(1920*60)wave-02.png(1920*60)在分辨率为1920

先看效果图:

视频加载中...
思路分析:

  • html

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

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

js实现波浪效果

wave-01.png(1920*60)

js实现波浪效果

wave-02.png(1920*60)

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

js实现波浪效果

重叠图

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

html代码如下:

js实现波浪效果

html

  • css

js实现波浪效果

css

  • js

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

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

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

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

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

js实现波浪效果

波浪动画

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

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】WEB前端学习:JS实现中文简体繁体切换(2019-08-22 12:38)
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部