摘要:执行弹幕的函数。采用定时器移动,这里是根据内容长度定义弹幕的移动速度。移动弹幕的过程中判断四个通道是否处于闲置状态,当移动出了屏幕,移动并且清除定时器。第一部分先判断数据是否加载完成这里是一个定时器,设置为秒。
前言
这个需求如题,大体上是将文章的评论数据,在文章的首图上面以弹幕的形式出现。当时在做这个需求的时候,花了挺多精力的,踩了很多坑,现将弹幕的实现思路写出来,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。
个人博客了解一下:obkoro1.com实现效果: 实现原理:
实现弹幕的原理,并不算太复杂,耗费一些时间,怼一怼应该都可以做出来。
获取弹幕数据。
将弹幕设置为四个通道,每个通道最多只能出现两条弹幕。
使用setInterval动态设置dom的left属性。
使用dom的offsetWidth和屏幕的宽度判断元素是否滚动超出屏幕,然后移除dom。
实现步骤: 1. 首先看一下html的结构。