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