简易弹幕功能实现
原文博客地址：藤原拓鞋的博客
开始
实现简单的弹幕功能
move() {
//弹幕div所在位置减去屏幕左上角位置，得left参数：弹幕div离最左边的位置
let left = this.Dom.offset().left - $(".screen").offset().left;
//随机生成弹幕移动速度
this.speed = Math.random() * 20 + 3;
//拼接获取弹幕元素的选择器
let ide = '#' + this.id;
//设置计时器
let timer = setInterval(function () {
left--;
//设置弹幕div的left属性
$(ide).css("left", left + "px");
if ($(ide).offset().left + $(ide).width() < $(".screen").offset().left) {
//当弹幕div的位置在屏幕左边，remove
$(ide).remove();
clearInterval(timer);
}
}, this.speed);
}
有一天，看着 B 站，慢慢忘记视频内容，脑子里构想弹幕功能的实现，于是自已试了试，写下代码，写下此文
代码 github 地址：https://github.com/li-car-fei/common-danmu
视图
由于只是个 demo，视图就随便点，构造几个 div 就算了：
<html>
<head>
<meta charset="utf-8">
<title>弹幕demotitle>
head>
<body>
<div class="screen">div>
<div class="toolbar">
<input id="text" type="text" placeholder="请输入弹幕内容" />
<button class="send">发射button>
<button class="clear">关闭弹幕button>
<div class="word_style">
颜色：<input type="color" name='color'>input>
<br>
字体大小：<input type="text" placeholder="字体大小" name="font_size">input>
<br>
弹幕高度：<select id="select_height">
<option value=400>全屏option>
<option value=200>半屏option>
<option value=133>三分之一option>
<option value=100>四分之一option>
select>
div>
div>
<script src="jquery-3.4.1.js">script>
<script src="./plugin.js">script>
<script>
//标志是否关闭弹幕
var isShow = true;
//标志弹幕的id
var id = 0;
script>
<script src="set.js">script>
<script src="fly.js">script>
body>
<style>
.screen {
position: relative;
width: 100%;
height: 400px;
margin: 30px auto;
overflow: hidden;
white-space: nowrap;
}
.toolbar {
width: 600px;
margin: 20px auto;
text-align: center;
}
.word_style {
margin-top: 13px;
border: 1px solid black;
}
.word_style input {
width: 53px;
margin-top: 10px;
}
style>
html>
然后，需要新建一个类来定义弹幕的属性以及行为，如下：
//定义弹幕类
class Item {
constructor(context, id, color, font_size, set_self) {
//弹幕id值
this.id = id;
//生成弹幕dom节点
this.Dom = $("" + context + "");
//绑定弹幕dom的id
this.Dom.attr("id", id);
/*
if ((color_arr[0] == '') && (color_arr[1] == '') && (color_arr[2] == '')) {
//随机生成弹幕颜色
this.fontColor = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random()) + ")";
} else {
//根据color_arr生成弹幕颜色
this.fontColor = "rgb(" + ((color_arr[0] == '') ? 0 : color_arr[0]) + "," + ((color_arr[1] == '') ? 0 : color_arr[1]) + "," + ((color_arr[2] == '') ? 0 : color_arr[2]) + ")";
}
*/
if (color == "") {
//随机生成弹幕颜色
this.fontColor =
"rgb(" +
Math.floor(Math.random() * 256) +
"," +
Math.floor(Math.random() * 256) +
"," +
Math.floor(Math.random()) +
")";
} else {
this.fontColor = color;
}
if (font_size == "") {
//随机生成弹幕大小
this.fontSize = Math.floor((Math.random() + 1) * 20) + "px";
} else {
//根据font_size生成弹幕大小
this.fontSize = font_size + "px";
}
//随机生成弹幕所在的高度
this.top = Math.floor(Math.random() * 250) + "px";
//获取弹幕区的宽度
let left = $(".screen").width() + "px";
//设置弹幕的样式参数
this.Dom.css({
position: "absolute",
color: this.fontColor,
"font-size": this.fontSize,
left: left,
top: this.top,
});
if (set_self) {
this.Dom.css("border", "1px solid black");
}
//将弹幕div加入到弹幕区
$(".screen").append(this.Dom);
}
move() {
//弹幕div所在位置减去屏幕左上角位置，得left参数：弹幕div离最左边的位置
let left = this.Dom.offset().left - $(".screen").offset().left;
//随机生成弹幕移动速度
this.speed = Math.random() * 20 + 3;
//拼接获取弹幕元素的选择器
let ide = "#" + this.id;
//设置计时器
let timer = setInterval(function () {
left--;
//设置弹幕div的left属性
$(ide).css("left", left + "px");
if ($(ide).offset().left + $(ide).width() < $(".screen").offset().left) {
//当弹幕div的位置在屏幕左边，remove
$(ide).remove();
clearInterval(timer);
}
}, this.speed);
}
}
接着，引入 jquery，并且依托 jquery 绑定 Dom 处理方法：
$("#select_height").change(function () {
var height = $(this).children("option:selected").val();
console.log(height);
change_height(height);
});
$(".send").on("click", function () {
//先获取弹幕各样式值
//let color_arr = [$(".word_style input[name='red']").val(), $(".word_style input[name='green']").val(), $(".word_style input[name='blue']").val()] || []
let color = $(".word_style input[name='color']").val();
console.log(color);
let font_size = $(".word_style input[name='font_size']").val() || "";
// 创建弹幕
let Dom = new Item($("#text").val(), id++, color, font_size, true);
// 移动弹幕
Dom.move();
//输入框置空
$("#text").val("");
/*
$(".word_style input[name='red']").val('')
$(".word_style input[name='green']").val('')
$(".word_style input[name='blue']").val('')
*/
$(".word_style input[name='font_size']").val("");
});
$("#text").on("keydown", function (event) {
if (event.keyCode == 13) {
//先获取弹幕各样式值
let color = $(".word_style input[name='color']").val();
console.log(color);
let font_size = $(".word_style input[name='font_size']").val() || "";
// 创建弹幕
let Dom = new Item($("#text").val(), id++, color, font_size, true);
// 移动弹幕
Dom.move();
//输入框置空
$("#text").val("");
$(".word_style input[name='red']").val("");
$(".word_style input[name='green']").val("");
$(".word_style input[name='blue']").val("");
$(".word_style input[name='font_size']").val("");
}
});
$(".clear").on("click", function () {
if (isShow) {
//设置屏幕透明度，使弹幕消失
$(".screen").css("opacity", 0);
//设置样式输入区透明度，使其消失
$(".word_style").css("opacity", 0);
isShow = false;
//修改button的内容
this.innerHTML = "打开弹幕";
} else {
//设置屏幕透明度，使弹幕出现
$(".screen").css("opacity", 1);
//设置样式输入区透明度，使其消失
$(".word_style").css("opacity", 1);
isShow = true;
//修改button的内容
this.innerHTML = "关闭弹幕";
}
});
现在，我们已经实现功能啦，可以尝试以下发弹幕
最后，依托前面的功能，我们再动态地添加弹幕，模拟视频弹幕
var dan_mu_arr = [
"我是捞马",
"66666",
"无敌",
"77777",
"886886",
"无语",
"怎么说，这波",
"难受啊马飞",
"起飞了",
"下次一定",
];
let clock_dan_mu = setInterval(() => {
const index = Math.floor(Math.random() * 10);
// 创建弹幕
let Dom = new Item(dan_mu_arr[index], id++, "", "", false);
// 移动弹幕
Dom.move();
}, 2500);
完成功能，谢谢阅读