彈幕的實現(純前端)

2021-08-21 10:20:35 字數 839 閱讀 5895

一、前言

今天瀏覽某**看到乙個活動頁有內嵌的彈幕模組(圖一),但是看到移動的彈幕重疊很多,不忍直視啊。突然想起很久之前自己寫寫過類似的彈幕,就翻出來看了一下,呵,也是不忍直視的,最後再附上當年的效果以及**;

二、大話幾點

5、彈幕的後台實現可以通過websocket實現,當然也可以借助node實現。當使用者輸入彈幕,彈幕需經過特殊處理,比如經過第三方(數美等)過濾敏感關鍵字等,最後再把內容下發,觜最後展示;

三、思考:怎麼做到彈幕均勻排布,不會重疊呢?還有速度控制問題。

1、可以想象把彈幕面板分成幾個管道,每條彈幕隨機分配(當然不是簡單的隨機,應該加上點概率論的知識)到每條管道中,當前方有彈幕時候,該彈幕的位置就要與前方彈幕保持一定計算的距離;

2、每條彈幕的速速要結合當前彈幕的長度和移動的位置去動態的新增初始速度,當然執行速度可以可以有linear ease-in ease-out ...等把控;

四、最後

很久前寫的彈幕,沒有對彈幕分布和速度進行把控,當然也沒有後台,純粹前端展示了,我就不折騰了。

傳送

前端實現迴圈彈幕效果

這裡給的margin right是為了給彈幕乙個隨機的間距,這樣顯得比較隨機 js 獲取螢幕寬度,在呼叫test的方法時候,彈幕先從最右邊螢幕出來,如果不給box重置padding left,那彈幕每次都在螢幕的最左邊,無法實現效果,我剛開始把padding left放在標籤上了,後來樣式被重置,無...

彈幕的實現

一 前言 今天瀏覽某 看到乙個活動頁有內嵌的彈幕模組 圖一 但是看到移動的彈幕重疊很多,不忍直視啊。突然想起很久之前自己寫寫過類似的彈幕,就翻出來看了一下,呵,也是不忍直視的,最後再附上當年的效果以及 二 大話幾點 5 彈幕的後台實現可以通過websocket實現,當然也可以借助node實現。當使用...

Vue Element UI實現純前端分頁

思路 我們在請求後端拿到的資料往往有很多條,這時候我們就希望通過分頁讓頁面上只展示某部分資料 如何展示某部分資料呢?既然是分頁,那麼必定會涉及到兩個東西 一 每一頁的資料條數,設它為pagenum 二 當前頁,就是當前頁是第幾頁,設它為currentpage 那麼我們就可以根據這兩個變數進行計算,計...