滚动弹幕案例

滚动弹幕案例

一、需求

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.valuedanmu.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 = falseshow.addEventListener('click',function(){if(isInputHidden){inputBox.style.display='block'show.textContent='收起'}else{inputBox.style.display='none'show.textContent='展开'}isInputHidden=!isInputHidden})
</script>

五、样式截图

六、实现原理

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