资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端将数据转化为弹幕效果的实现方式

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

mykurisu / 3095人阅读

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

前言

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

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

实现原理：

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

获取弹幕数据。

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

使用setInterval动态设置dom的left属性。

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

实现步骤： 1. 首先看一下html的结构。 
  1.     
  2.         
  3.         
  4.             
  5.             
  6.             
  7.             
  8.         
  9.       
  10.       
  11.       
  12.               
  13.   
  14.                   
    最新活动
     
  15.            
  16.          
  17.                     
  18.                       
  19.                                                                                                                        
  20.                           
  21.                             云服务器                                 
  22.                           
  23.                         
  24.                                                 
  25.                           
  26.                             GPU云服务器                                 
  27.                           
  28.                         
  29.                                                                    
  30.                     
  31.                         
  32.                       
  33.                     
  34.                       
  35.                                         
  36.               
  37. 
                    
                
  39.
阅读需要支付1元查看
<