原生JS實現彈幕效果

純屬無聊寫的，可能有很多問題，歡迎批評指教。

效果圖：圖一是預設的一些彈幕，圖二是自己發射的彈幕，效果是一樣的。demo位址

首先是彈幕的位置，是要從最右滑到最左，為了防止隨機高度彈幕會覆蓋的問題，設定了通道。

每乙個通道是從左到右的一條，高度固定，這樣不同通道的彈幕不會相互覆蓋。

彈幕滑動就是簡單設定css屬性 transition

實現。開始使用 left

改變彈幕的位置，後來改為 transform

，效能確實提高很多。

設定10條彈幕通道，每個通道有乙個dom池，每一次發射彈幕就從dom池中拿出乙個dom從右滑到左邊直到消失，然後再放回dom池，當dom池為空時就不能再通過該通道發射彈幕了，通過這種方式來限制最大同屏彈幕數。

因為通過 transition

設定了彈幕滑動的時間，而這個時間固定的，距離彈幕最左露頭到最右消失，也就是「螢幕寬度+彈幕長度」，所以：彈幕越長，速度越快。這樣的話，後面特別長的彈幕就有可能超過前面比較短的彈幕，本來根據彈幕長度設定了滑動時間，但是跑去看了下b站彈幕也有這個屬性，所以就又改回去了》_<

最後設定乙個彈幕池，設定乙個定時器不停的去彈幕池拿彈幕，當dom空閒且有未發射彈幕時就發射彈幕。

點選傳送按鈕就是把彈幕放到彈幕池就好了。

其實我寫的挺簡單的，又說了好多廢話，**裡我都加了注釋。這我是第一次寫js全部加了分號哦！表揚下自己。

完整**：

doctype html
>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
/>
<
title
>原生js實現彈幕效果
title
>
<
style
>
.right 
.left 
input 
button 
style
>
head
>
<
body
>
<
div 
id>
<
input 
type
="text"
>
<
button
>發  送
button
>
div>
<
script
>/**
* 設定 彈幕dom池 每乙個通道最多六條彈幕**/
const max_dm_count =6
;const channel_count =10
;let dompool =;
let danmupool =[
'前方大量彈幕來襲，請做好準備！', 
'2333333', 
'2333333', 
'2333333', 
'2333333', 
'2333333', 
'潯陽江頭夜送客， 楓葉荻花秋瑟瑟
', 
'2333333', 
'2333333', 
'2333333', 
'2333333', 
'2333333', 
'2333333',
'主人下馬客在船， 舉酒欲飲無管弦。', 
'醉不成歡慘將別， 別時茫茫江浸月', 
'忽聞水上琵琶聲， 主人忘歸客不發。', 
'尋聲暗問彈者誰？ 琵琶聲停欲語遲。', 
'移船相近邀相見， 添酒回燈重開宴。', 
'千呼萬喚始出來， 猶抱琵琶半遮面。',
'轉軸撥弦三兩聲， 未成曲調先有情。', 
'弦弦掩抑聲聲思， 似訴平生不得志。', 
'低眉信手續續彈， 說盡心中無限事。', 
'輕攏慢捻抹復挑， 初為霓裳後六么。', 
'大弦嘈嘈如急雨， 小弦切切如私語。', 
'嘈嘈切切錯雜彈， 大珠小珠落玉盤。', 
'間關鶯語花底滑， 幽咽泉流冰下難。', 
'冰泉冷澀弦凝絕， 凝絕不通聲暫歇。', 
'別有幽愁暗恨生， 此時無聲勝有聲。', 
'銀瓶乍破水漿迸， 鐵騎突出刀槍鳴。', 
'曲終收撥當心畫， 四弦一聲如裂帛。', 
'東船西舫悄無言， 唯見江心秋月白。', 
'沉吟放撥插弦中， 整頓衣裳起斂容。', 
'自言本是京城女， 家在蝦蟆陵下住。', 
'十三學得琵琶成， 名屬教坊第一部。', 
'曲罷曾教善才服， 妝成每被秋娘妒。', 
'五陵年少爭纏頭， 一曲紅綃不知數。', 
'鈿頭銀篦擊節碎， 血色羅裙翻酒汙。', 
'今年歡笑復明年， 秋月春風等閒度。', 
'弟走從軍阿姨死， 暮去朝來顏色故。', 
'門前冷落鞍馬稀， 老大嫁作商人婦。', 
'商人重利輕別離， 前月浮梁買茶去。', 
'去來江口守空船， 繞船月明江水寒。', 
'夜深忽夢少年事， 夢啼妝淚紅闌干。',
'我聞琵琶已嘆息， 又聞此語重唧唧。', 
'同是天涯淪落人， 相逢何必曾相識！', 
'我從去年辭帝京， 謫居臥病潯陽城。',
'潯陽地僻無**， 終歲不聞絲竹聲。', 
'住近湓江地低濕， 黃蘆苦竹繞宅生。', 
'其間旦暮聞何物？ 杜鵑啼血猿哀鳴。',
'春江花朝秋月夜， 往往取酒還獨傾。', 
'豈無山歌與村笛？ 嘔啞嘲哳難為聽。', 
'今夜聞君琵琶語， 如聽仙樂耳暫明。',
'莫辭更坐彈一曲， 為君翻作《琵琶行》。', 
'感我此言良久立， 卻坐促弦弦轉急。', 
'淒淒不似向前聲， 滿座重聞皆掩泣。',
'座中泣下誰最多？ 江州司馬青衫溼。'];
let hasposition =;
/*** 做一下初始化工作 */
function
init() );
}dompool.push(doms);
} //hasposition 標記每個通道目前是否有位置
for(let i =0
; i 
<
channel_count; i
++) }/*
* * 獲取乙個可以發射彈幕的通道 沒有則返回-1 */
function
getchannel() 
return-1
;}/**
* 根據dom和彈幕資訊 發射彈幕 */
function
shootdanmu(dom, text, channel) s linear`;
= '-' + dom.clientwidth + 'px';
//設定彈幕的位置資訊 效能優化 left -> transform
dom.style.transform 
=`translatex($px)`;
dom.classname ='
left';
hasposition[channel] 
=false; 
//彈幕全部顯示之後 才能開始下一條彈幕
//大概 dom.clientwidth * 10 的時間 該條彈幕就從右邊全部劃出到可見區域 再加1秒保證彈幕之間距離
settimeout(() 
=>
, dom.clientwidth *10
+1000);}
window.onload 
=function
() )
input.addeventlistener(
'keyup
', (e) 
=>
})//
每隔1ms從彈幕池裡獲取彈幕（如果有的話）並發射
setinterval(() 
=>
}, 1);
} script
>
body
>
html
>

最後加乙個 transform

和 left

的效能圖對比：

原生JS實現彈幕效果

原生js彈幕實現範例

Jquery實現彈幕效果

原生js實現簡單動畫效果

原生JS實現彈幕效果

原生js彈幕實現範例

Jquery實現彈幕效果

原生js實現簡單動畫效果

相關推薦