做网站一定需要icp么,杭州网站设计 网站,关于企业网站建设,营销案例100例滚动弹幕案例
一、需求
1.页面上漂浮字体大小不一、颜色不一#xff0c;从左向右滚动的弹幕#xff1b; 2.底部中间有一个发送功能#xff0c;可以发送新的弹幕#xff1b; 3.底部的发送部分可以向下收起和弹出。
二、html
div classcontainer…滚动弹幕案例
一、需求
1.页面上漂浮字体大小不一、颜色不一从左向右滚动的弹幕 2.底部中间有一个发送功能可以发送新的弹幕 3.底部的发送部分可以向下收起和弹出。
二、html
div classcontainerdiv classcontentp哈哈哈哈哈/pp哈哈哈哈哈哈哈哈/pp哈哈哈哈哈/pp哈哈哈哈哈哈哈/pp哈哈哈哈哈哈哈哈哈哈哈哈哈/pp哈哈哈哈哈哈哈哈哈哈/pp哈哈哈/p/divdiv classinput-boxinput typetextbutton发射/button/divbutton classshow收起/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
scriptconst 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)14px)}//发送弹幕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 randomDelayMath.floor(Math.random()*10000)hadDanmu.style.color getRandomRGBColor()hadDanmu.style.top getRandomTop()hadDanmu.style.fontSize getRandomFontSize()hadDanmu.style.animationDelay randomDelayms})//展开收起let isInputHidden falseshow.addEventListener(click,function(){if(isInputHidden){inputBox.style.displayblockshow.textContent收起}else{inputBox.style.displaynoneshow.textContent展开}isInputHidden!isInputHidden})
/script五、样式截图 六、实现原理
使用Math.random随机生成方法构建随机颜色、随机大小、随机绝对定位高度对于已有的弹幕针对每一个弹幕随机生成颜色大小位置并且设置css动画animation使其从左到右运动对每个弹幕设置不同的延迟时间出现形成弹幕效果。对于即将发送的弹幕需新建p元素且同样随机生成颜色大小位置弹幕内容为input的value值最后将其添加至已有弹幕p元素后。发送条的展开收起引入布尔变量isInputHidden并设置初始值为false按钮内容初始设置为收起发送条display初始值为block当点击收起按钮按钮收起–展开发送条block–noneisInputHidden值取反相反同理。
