摘要:執行彈幕的函數。采用定時器移動,這里是根據內容長度定義彈幕的移動速度。移動彈幕的過程中判斷四個通道是否處于閑置狀態,當移動出了屏幕,移動并且清除定時器。第一部分先判斷數據是否加載完成這里是一個定時器,設置為秒。
前言
這個需求如題,大體上是將文章的評論數據,在文章的首圖上面以彈幕的形式出現。當時在做這個需求的時候,花了挺多精力的,踩了很多坑,現將彈幕的實現思路寫出來,如果喜歡的話可以點波贊/關注,支持一下,希望大家看完本文可以有所收獲。
個人博客了解一下:obkoro1.com實現效果: 實現原理:
實現彈幕的原理,并不算太復雜,耗費一些時間,懟一懟應該都可以做出來。
獲取彈幕數據。
將彈幕設置為四個通道,每個通道最多只能出現兩條彈幕。
使用setInterval動態設置dom的left屬性。
使用dom的offsetWidth和屏幕的寬度判斷元素是否滾動超出屏幕,然后移除dom。
實現步驟: 1. 首先看一下html的結構。