资讯专栏INFORMATION COLUMN

前端将数据转化为弹幕效果的实现方式

_Dreams / 3271人阅读

摘要:执行弹幕的函数。采用定时器移动,这里是根据内容长度定义弹幕的移动速度。移动弹幕的过程中判断四个通道是否处于闲置状态,当移动出了屏幕,移动并且清除定时器。第一部分先判断数据是否加载完成这里是一个定时器,设置为秒。

前言

这个需求如题,大体上是将文章的评论数据,在文章的首图上面以弹幕的形式出现。当时在做这个需求的时候,花了挺多精力的,踩了很多坑,现将弹幕的实现思路写出来,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。

个人博客了解一下:obkoro1.com
实现效果:

实现原理:

实现弹幕的原理,并不算太复杂,耗费一些时间,怼一怼应该都可以做出来。

获取弹幕数据。

将弹幕设置为四个通道,每个通道最多只能出现两条弹幕。

使用setInterval动态设置domleft属性。

使用dom的offsetWidth和屏幕的宽度判断元素是否滚动超出屏幕,然后移除dom。

实现步骤: 1. 首先看一下html的结构。
    
最新活动
阅读需要支付1元查看
<