HTML彈幕滾動是現在非常流行的一種互動方式,在視頻直播或者社交平臺上都廣泛應用。下面我們來了解一下HTML彈幕滾動代碼的實現方法。
<div id="danmu"></div> <style> #danmu { position: fixed; top: 50%; transform: translateY(-50%); width: 100%; overflow: hidden; white-space: nowrap; } .bullet { display: inline-block; font-size: 20px; position: absolute; color: white; text-shadow: 0 0 2px black; animation: move 5s linear; } @keyframes move { from { transform: translateX(100%); } to { transform: translateX(-100%); } } </style> <script> function addBullet(text) { var bullet = document.createElement("span"); bullet.className = "bullet"; bullet.innerText = text; var danmu = document.getElementById("danmu"); danmu.appendChild(bullet); } var timer = setInterval(function() { var texts = ["彈幕1", "彈幕2", "彈幕3", "彈幕4", "彈幕5"]; var index = Math.floor(Math.random() * texts.length); addBullet(texts[index]); }, 2000); </script>
以上代碼實現了在指定位置上不斷滾動彈幕的功能。其中,id為danmu的div元素用于容納彈幕,通過設置其position:fixed、top:50%以及transform: translateY(-50%)屬性使其始終位于瀏覽器窗口的中央位置。然后通過設置overflow:hidden和white-space:nowrap屬性使其內容能夠橫向滾動。
每個彈幕的樣式由類名為bullet的元素控制,其中display:inline-block屬性使得每個彈幕在同一行內顯示,設置字體大小、顏色、陰影等樣式后,通過animation屬性設置了一個名為move的動畫,讓每個彈幕在5秒內橫向滾動。
在JavaScript代碼中,addBullet函數用于向danmu元素中添加新的彈幕,通過創建span元素并為其添加bullet類名、設置innerText屬性后,添加到danmu元素中即可。然后通過一個名為timer的定時器不斷往danmu元素中添加隨機文本所組成的彈幕。