这次给大家带来用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
<div class="container">
<div id="content" class="content"></div>
<div class="content-opt">
<div id="content-text" class="content-text"></div>
<div class="content-input">
<input id="text" type="text">
<button id="send">发送</button>
</div>
</div>
</div>
//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);
})
})()
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
用h5的canvas做出弹幕效果
用h5的canvas做恐怖动画
以上就是用js代码做出弹幕效果的详细内容。