php 文字弹幕效果代码,用JS代码做出弹幕效果

这次给大家带来用JS代码做出弹幕效果，用JS代码做出弹幕效果的注意事项有哪些，下面就是实战案例，一起来看一下。

实现原理

1、设置展示弹幕元素位置属性为relative

2、动态创建弹幕元素，位置属性设置absolute，left为展示宽度

3、随机设置弹幕元素top值

4、随机产生弹幕元素移动速率，修改left值

随机颜色

第一种实现let color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);

第二种实现let color = '#' + Math.floor(Math.random() * 16777215).toString(16)；

第三种实现let r = Math.floor(Math.random()*256);let g = Math.floor(Math.random()*256);let b = Math.floor(Math.random()*256);let color = `rgb(${r},${g},${b})`;

随机速率50 * +Math.random().toFixed(2)

代码

//html

发送

//css* {

box-sizing: border-box;

outline: none;

}

p {

margin: .5em;

word-break: break-all;

}

.container {

position: relative;

width: 700px;

height: 500px;

margin: auto;

padding-right: 200px;

}

.content {

width: 100%;

height: 100%;

border: 1px solid #ccc;}

.content-opt {

position: absolute;

top: 0;

right: 0;

width: 200px;

height: 100%;

}

.content-text {

height: calc(100% - 30px);

margin-bottom: 30px;

border: 1px solid #ccc;

overflow: auto;

}

.content-input {

position: absolute;

bottom: 0;

width: 100%;

height: 30px;

border: 1px solid #ccc;}

.content-input input {

width: 70%;

padding: 2px;

border-radius: 5px;

}

.content-input button {

padding: 3px 10px;

border: none;

border-radius: 5px;

background: rgb(90, 154, 214);

}

//js(function () {

class Barrage {

constructor(id) {

this.domList = [];

this.dom = document.querySelector('#' + id); if (this.dom.style.position == '' || this.dom.style.position == 'static') {

this.dom.style.position = 'relative';

}

this.dom.style.overflow = 'hidden'; let rect = this.dom.getBoundingClientRect();

this.domWidth = rect.right - rect.left;

this.domHeight = rect.bottom - rect.top;

}

shoot(text) { let div = document.createElement('div');

div.style.position = 'absolute';

div.style.left = this.domWidth + 'px';

div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + 'px';

div.style.whiteSpace = 'nowrap';

div.style.color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);

div.innerText = text;

this.dom.appendChild(div); let roll = (timer) => { let now = +new Date();

roll.last = roll.last || now;

roll.timer = roll.timer || timer; let left = div.offsetLeft; let rect = div.getBoundingClientRect(); if (left < (rect.left - rect.right)) {

this.dom.removeChild(div);

} else { if (now - roll.last >= roll.timer) {

roll.last = now;

left -= 3;

div.style.left = left + 'px';

}

requestAnimationFrame(roll);

}

}

roll(50 * +Math.random().toFixed(2));

}

} let barage = new Barrage('content'); function appendList(text) { let p = document.createElement('p');

p.innerText = text;

document.querySelector('#content-text').appendChild(p);

}

document.querySelector('#send').onclick = () => { let text = document.querySelector('#text').value;

barage.shoot(text);

appendList(text);

};

const textList = ['弹幕', '666', '233333333', 'javascript', 'html', 'css', '前端框架', 'Vue', 'React', 'Angular', '测试弹幕效果'

];

textList.forEach((s) => {

barage.shoot(s);

appendList(s);

})

})()

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：