個人部落格了解一下：obkoro1.com實現彈幕的原理，並不算太複雜，耗費一些時間，懟一懟應該都可以做出來。
獲取彈幕資料。
將彈幕設定為四個通道，每個通道最多只能出現兩條彈幕。
使用
setinterval動態設定dom的left屬性。使用dom的
offsetwidth和螢幕的寬度判斷元素是否滾動超出螢幕，然後移除dom。關於這裡的css樣式，關鍵點都在上面說了，就注意一下上面通道是怎樣形成的，就可以了。具體的樣式也就不貼出來了，就根據各自的需求來吧。要實現彈幕效果肯定需要有資料，這裡就是發請求了。
獲取資料時，要考慮資料量，一次不可能全部都獲取，可以一次獲取一部分，當資料要載入完的時候，再次請求資料。
這裡要記錄資料資料是否全部請求完成，如果請求完成，就可以不再傳送資料，直接用之前獲取的全部資料就可以了。
彈幕資料獲取後，就執行彈幕執行的函式，因為我在寫彈幕函式的時候，設定了很多資料狀態，這裡就大概講一下實現思路和關鍵部分**。
彈幕函式包括的功能：
定時獲取資料(判斷資料是否載入完畢)
定時發射彈幕(判斷通道是否閒置),傳入彈幕所需要的內容，使用者頭像等。
建立dom內容，根據傳參生成彈幕div，設定style屬性，根據控制彈幕資料陣列的下標將div插入對應的dom中。
採用定時器移動dom，這裡是根據內容長度定義彈幕的移動速度。
移動彈幕的過程中判斷四個通道是否處於閒置狀態，當dom移動出了螢幕，移動dom並且清除定時器。
個人blogand掘金個人主頁關注我的訂閱號，來一起學習成長。function barrage()//設定四個通道的變數，當這幾個變數為false的時候，才可發射
if(divstatus.div1===false)
};// 建立彈幕內容，自定義彈幕移動速度
function barrageout(text,imgurl,num)
// 建立dom內容 定義dom style樣式
let divbox = document.createelement('div');
let divboximg=document.createelement('span');
let divboxtext=document.createelement('span');
divbox.setattribute('class','barragedivclass');
divboxtext.innerhtml=text;
divboximg.setattribute('class','barragedivclass_img');
divboximg.style.backgroundimage=`url($)`;
divbox.style.left=document.body.clientwidth+2000+'px';// 初始化left位置,一開始在螢幕的右側
// 定時器移動dom，形成彈幕
let time,l=0;
time= setinterval(function()else
//通過減少left屬性移動這個div 從右往左移動
divbox.style.left = document.body.clientwidth+l+'px';
let deldiv=()=>else}}
}if( l <= (0-divbox.offsetwidth-120) )
}else
}},20)}}
原文發布時間為：2023年05月02日
掘金
前端實現迴圈彈幕效果
這裡給的margin right是為了給彈幕乙個隨機的間距，這樣顯得比較隨機 js 獲取螢幕寬度，在呼叫test的方法時候，彈幕先從最右邊螢幕出來，如果不給box重置padding left，那彈幕每次都在螢幕的最左邊，無法實現效果，我剛開始把padding left放在標籤上了，後來樣式被重置，無...
關於彈幕效果的實現
doctype html html lang en head meta charset utf 8 title title title style content bottomcon txt btn span style head body div class content div class b...
彈幕的實現（純前端）
一 前言 今天瀏覽某 看到乙個活動頁有內嵌的彈幕模組 圖一 但是看到移動的彈幕重疊很多，不忍直視啊。突然想起很久之前自己寫寫過類似的彈幕，就翻出來看了一下，呵，也是不忍直視的，最後再附上當年的效果以及 二 大話幾點 5 彈幕的後台實現可以通過websocket實現，當然也可以借助node實現。當使用...