简易弹幕功能实现

最新推荐文章于 2021-01-27 08:32:24 发布

藤原拓鞋 carfied

最新推荐文章于 2021-01-27 08:32:24 发布

阅读量620

点赞数

分类专栏：前端知识记录文章标签： js html html5

本文链接：https://blog.csdn.net/weixin_43783814/article/details/106572623

版权

前端知识记录专栏收录该内容

10 篇文章 0 订阅

订阅专栏

原文博客地址：藤原拓鞋的博客

开始

实现简单的弹幕功能

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 就算了：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>弹幕demo</title>
</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">
            <!--颜色: r: <input type="text" placeholder="red" name="red"></input> g: <input type="text" placeholder="green"
                name="green"></input> b: <input type="text" placeholder="blue" name="blue"></input>-->
            颜色：<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="Item.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 = $("<div class='dan_mu'>" + context + "</div>");
    //绑定弹幕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);

完成功能，谢谢阅读

藤原拓鞋 carfied

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简易弹幕功能实现

原文博客地址：藤原拓鞋的博客开始实现简单的弹幕功能move() { //弹幕div所在位置减去屏幕左上角位置，得left参数：弹幕div离最左边的位置 let left = this.Dom.offset().left - $(".screen").offset().left; //随机生成弹幕移动速度 this.speed = Math.random() * 20 + 3; //拼接获取弹幕元素的选择器
复制链接

扫一扫