滚动弹幕案例

滚动弹幕案例 一、需求

1.页面上漂浮字体大小不一、颜色不一，从左向右滚动的弹幕； 2.底部中间有一个发送功能，可以发送新的弹幕； 3.底部的发送部分可以向下收起和弹出。

二、html <div class="container"> <div class="content"> <p>哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈</p> </div> <div class="input-box"> <input type="text"> <button>发射</button> </div> <button class="show">收起</button> </div> 三、css <style> .container{ margin:0 auto; width: 500px; height: 400px; border:1px solid black; position:relative; } .content { width: 500px; height: 365px; position:relative; overflow: hidden; } .input-box { width: 500px; height: 30px; position:absolute; bottom:0; } .input-box input { width: 400px; height: 25px; float:left; } .input-box button{ width: 90px; height: 30px; float:right; cursor:pointer; } @keyframes moveDanmu { from{ left:-100% } to{ left:100% } } p{ white-space: nowrap; position:absolute; animation: moveDanmu 8s linear infinite; left:-100%; } .show { width: 50px; height: 30px; position:absolute; left:500px; bottom:0px; } </style> 四、javascript <script> const container =document.querySelector('.container') const content =document.querySelector('.content') const danmus = document.querySelectorAll('.content p') const text = document.querySelector('.input-box input') const button = document.querySelector('.input-box button') const inputBox = document.querySelector('.input-box') const show = document.querySelector('.show') //创建随机颜色 function getRandomRGBColor(){ const r = Math.floor(Math.random()*255) const g = Math.floor(Math.random()*255) const b = Math.floor(Math.random()*255) return `rgb(${r},${g},${b})` } //创建top值 function getRandomTop(){ return (Math.floor(Math.random()*content.offsetHeight)- 44 +'px') } console.log(content.offsetHeight); //创建随机大小 function getRandomFontSize(){ return (Math.floor(Math.random()*30)+14+'px') } //发送弹幕 button.addEventListener('click',function(){ if(text.value!==''){ const danmu = document.createElement('p') danmu.textContent = text.value danmu.style.color = getRandomRGBColor() danmu.style.top= getRandomTop() danmu.style.fontSize = getRandomFontSize() content.appendChild(danmu) text.value = '' // 弹幕滚动结束后移除 danmu.addEventListener('animationend', () => { danmuContainer.removeChild(danmu); }); } }) //已有弹幕 danmus.forEach((hadDanmu)=>{ const randomDelay=Math.floor(Math.random()*10000) hadDanmu.style.color = getRandomRGBColor() hadDanmu.style.top= getRandomTop() hadDanmu.style.fontSize = getRandomFontSize() hadDanmu.style.animationDelay = randomDelay+'ms' }) //展开收起 let isInputHidden = false show.addEventListener('click',function(){ if(isInputHidden){ inputBox.style.display='block' show.textContent='收起' } else{ inputBox.style.display='none' show.textContent='展开' } isInputHidden=!isInputHidden }) </script> 五、样式截图

六、实现原理 使用Math.random随机生成方法，构建随机颜色、随机大小、随机绝对定位高度对于已有的弹幕，针对每一个弹幕随机生成颜色大小位置，并且设置css动画（animation）使其从左到右运动，对每个弹幕设置不同的延迟时间出现，形成弹幕效果。对于即将发送的弹幕，需新建p元素，且同样随机生成颜色大小位置，弹幕内容为input的value值，最后将其添加至已有弹幕p元素后。发送条的展开收起，引入布尔变量isInputHidden并设置初始值为false，按钮内容初始设置为收起，发送条display初始值为block，当点击收起按钮，按钮收起–>展开，发送条block–>none，isInputHidden值取反，相反同理。