您好,登錄后才能下訂單哦!
JavaScript中怎么實現彈幕效果,很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
js實現彈幕效果
彈幕肯定盡量不能重疊在一起,所以我把整個彈幕出現的背景劃分為幾塊。
什么意思呢?就是這里有5條彈道,彈幕就是出現在這5條彈道之間的一條。具體劃多少條彈道,每條彈道的寬度要看你的背景和你自己的設計了。
好了,彈道有了,怎么創建彈幕呢?這里我們用到了appendChild方法,每個彈幕的內容都是隨機的。然后我固定了彈幕的數量,并且加了定時器,
當彈幕到達左邊時,彈幕內容再次隨機,輸入框發送的彈幕出現一次后,將內容加入到預備詞庫中,并將此彈幕刪除。防止彈幕過多報錯。
同時每個彈幕出現的時機肯定不能相同,所以我在每個彈幕最開始出現時加了延遲。
大概的設計就是這樣了,這里還是總結一下存在的問題:
1.彈幕有時會出現同時出現在同一個彈道上,甚至重疊,暫時還沒找到原因。
2.當輸入框連續多次發送彈幕時,可能會因為彈道不夠出現意外的情況。
3.與真正的彈幕相比,只是簡易版的,功能單一。
js實現彈幕效果代碼
<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="Generator"content="EditPlus?"> <metaname="Author"content="natural_live"> <metaname="Keywords"content="barrage"> <metaname="Description"content=""> <title>彈幕</title>
看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。