JQuery 弹幕可上下左右

水平弹幕，可设置向左、向右

containerId为显示弹幕容器ID, message弹幕内容, direction弹幕移动方向

// Jquery指定容器 向左或向右弹幕
      function sendBarrage_horizontal(containerId, message, direction) {
        // ===========第1部分,设置并挂载元素=========================
        // 定义弹幕元素，设置display:inline-block目的是获取内容实际的宽度
        var $barrage = $(
          '<div class="barrage" style="display:inline-block"></div>'
        );
        // 将弹幕内容放到元素中
        $barrage.text(message);
        // 将弹幕元素挂载到指定显示容器中,并设置容器，超过自动隐藏及相对位置
        $('#' + containerId).append($barrage);
        $('#' + containerId).css({ position: 'relative', overflow: 'hidden' });
        // ==========================================

        // ===========第2部分，显示高度位置及颜色=========================
        // 获取容器高度、弹幕元素高度，用于计算弹幕的上下偏移位置
        var containerHeight = $('#' + containerId).outerHeight();
        var barrageHeight = $barrage.outerHeight();

        // 获取容器宽度、弹幕元素宽度，用于计算弹幕开始显示的位置，结束显示的位置
        var containerWidth = $('#' + containerId).outerWidth();
        var barragewidth = $barrage.outerWidth();

        // 用于根据容器及弹幕元素的高度生成弹幕元素在容器显示时的位置高度
        var top =
          Math.floor(Math.random() * (containerHeight - barrageHeight)) + 'px';
        // 随机颜色
        var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
        $barrage.css({
          top: top,
          color: color,
          position: 'absolute',
          'white-space': 'nowrap',
        });
        // ==========================================

        // ===========第3部分，显示移动方向位置及颜色=========================
        // 从右侧开始向左移动
        if (direction == 'left' || direction == '') {
          $barrage
            .css({
              left: containerWidth,
            })
            .animate({ left: -barragewidth }, 10000, function () {
              $(this).remove();
            });
        }
        // 从左侧开始向右移动
        if (direction == 'right') {
          $barrage
            .css({
              left: -barragewidth,
            })
            .animate({ left: containerWidth }, 10000, function () {
              $(this).remove();
            });
        }
      }

垂直弹幕，可设置向上、向下

containerId为显示弹幕容器ID, message弹幕内容, direction弹幕移动方向

 // Jquery指定容器 向上或向下弹幕
      function sendBarrage_vertical(containerId, message, direction) {
        // ===========第1部分,设置并挂载元素=========================
        // 定义弹幕元素，设置writing-mode: vertical-rl;目的是设置显示问垂直方向
        var $barrage = $(
          '<div class="barrage" style="writing-mode: vertical-rl;"></div>'
        );
        // 将弹幕内容放到元素中
        $barrage.text(message);
        // 将弹幕元素挂载到指定显示容器中,并设置容器，超过自动隐藏及相对位置
        $('#' + containerId).append($barrage);
        $('#' + containerId).css({ position: 'relative', overflow: 'hidden' });
        // ==========================================

        // ===========第2部分，显示高度位置及颜色=========================
        // 获取容器高度、弹幕元素高度，用于计算弹幕的上下偏移位置
        var containerHeight = $('#' + containerId).outerHeight();
        var barrageHeight = $barrage.outerHeight();

        // 获取容器宽度、弹幕元素宽度，用于计算弹幕开始显示的位置，结束显示的位置
        var containerWidth = $('#' + containerId).outerWidth();
        var barragewidth = $barrage.outerWidth();

        // 用于根据容器及弹幕元素的高度生成弹幕元素在容器显示时的位置高度
        var left =
          Math.floor(Math.random() * (containerWidth - barragewidth)) + 'px';
        // 随机颜色
        var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
        $barrage.css({
          left: left,
          color: color,
          position: 'absolute',
          'white-space': 'nowrap',
        });
        // ==========================================

        // ===========第3部分，显示移动方向位置及颜色=========================
        // 从右侧开始向下移动
        if (direction == 'down' || direction == '') {
          $barrage
            .css({
              top: -barrageHeight,
            })
            .animate({ top: containerHeight }, 10000, function () {
              $(this).remove();
            });
        }
        // 从左侧开始向上移动
        if (direction == 'up') {
          $barrage
            .css({
              top: containerHeight,
            })
            .animate({ top: -barrageHeight }, 10000, function () {
              $(this).remove();
            });
        }
      }

标题完整示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>

    <style>
      #barrage-container {
        width: 50%;
        height: 200px;
        margin-left: 200px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="barrage-container"></div>
    <input
      type="text"
      id="barrage-input"
      title="弹幕"
    />
    <button id="send-barrage-right">向右移动-发送</button>
    <button id="send-barrage-left">向左移动-发送</button>
    <button id="send-barrage-up">向上移动-发送</button>
    <button id="send-barrage-down">向左下移动-发送</button>
    <script
      src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"
      type="text/javascript"
    ></script>

    <!--自定义的JS代码-->
    <script type="text/javascript">
      $(document).ready(function () {
        $('#send-barrage-right').click(function () {
          var message = $('#barrage-input').val();
          sendBarrage_horizontal('barrage-container', message, 'right');
        });

        $('#send-barrage-left').click(function () {
          var message = $('#barrage-input').val();
          sendBarrage_horizontal('barrage-container', message, 'left');
        });

        $('#send-barrage-up').click(function () {
          var message = $('#barrage-input').val();
          sendBarrage_vertical('barrage-container', message, 'up');
        });
        $('#send-barrage-down').click(function () {
          var message = $('#barrage-input').val();
          sendBarrage_vertical('barrage-container', message, 'down');
        });
      });

      // Jquery指定容器 向左或向右弹幕
      function sendBarrage_horizontal(containerId, message, direction) {
        // ===========第1部分,设置并挂载元素=========================
        // 定义弹幕元素，设置display:inline-block目的是获取内容实际的宽度
        var $barrage = $(
          '<div class="barrage" style="display:inline-block"></div>'
        );
        // 将弹幕内容放到元素中
        $barrage.text(message);
        // 将弹幕元素挂载到指定显示容器中,并设置容器，超过自动隐藏及相对位置
        $('#' + containerId).append($barrage);
        $('#' + containerId).css({ position: 'relative', overflow: 'hidden' });
        // ==========================================

        // ===========第2部分，显示高度位置及颜色=========================
        // 获取容器高度、弹幕元素高度，用于计算弹幕的上下偏移位置
        var containerHeight = $('#' + containerId).outerHeight();
        var barrageHeight = $barrage.outerHeight();

        // 获取容器宽度、弹幕元素宽度，用于计算弹幕开始显示的位置，结束显示的位置
        var containerWidth = $('#' + containerId).outerWidth();
        var barragewidth = $barrage.outerWidth();

        // 用于根据容器及弹幕元素的高度生成弹幕元素在容器显示时的位置高度
        var top =
          Math.floor(Math.random() * (containerHeight - barrageHeight)) + 'px';
        // 随机颜色
        var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
        $barrage.css({
          top: top,
          color: color,
          position: 'absolute',
          'white-space': 'nowrap',
        });
        // ==========================================

        // ===========第3部分，显示移动方向位置及颜色=========================
        // 从右侧开始向左移动
        if (direction == 'left' || direction == '') {
          $barrage
            .css({
              left: containerWidth,
            })
            .animate({ left: -barragewidth }, 10000, function () {
              $(this).remove();
            });
        }
        // 从左侧开始向右移动
        if (direction == 'right') {
          $barrage
            .css({
              left: -barragewidth,
            })
            .animate({ left: containerWidth }, 10000, function () {
              $(this).remove();
            });
        }
      }

      // Jquery指定容器 向上或向下弹幕
      function sendBarrage_vertical(containerId, message, direction) {
        // ===========第1部分,设置并挂载元素=========================
        // 定义弹幕元素，设置writing-mode: vertical-rl;目的是设置显示问垂直方向
        var $barrage = $(
          '<div class="barrage" style="writing-mode: vertical-rl;"></div>'
        );
        // 将弹幕内容放到元素中
        $barrage.text(message);
        // 将弹幕元素挂载到指定显示容器中,并设置容器，超过自动隐藏及相对位置
        $('#' + containerId).append($barrage);
        $('#' + containerId).css({ position: 'relative', overflow: 'hidden' });
        // ==========================================

        // ===========第2部分，显示高度位置及颜色=========================
        // 获取容器高度、弹幕元素高度，用于计算弹幕的上下偏移位置
        var containerHeight = $('#' + containerId).outerHeight();
        var barrageHeight = $barrage.outerHeight();

        // 获取容器宽度、弹幕元素宽度，用于计算弹幕开始显示的位置，结束显示的位置
        var containerWidth = $('#' + containerId).outerWidth();
        var barragewidth = $barrage.outerWidth();

        // 用于根据容器及弹幕元素的高度生成弹幕元素在容器显示时的位置高度
        var left =
          Math.floor(Math.random() * (containerWidth - barragewidth)) + 'px';
        // 随机颜色
        var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
        $barrage.css({
          left: left,
          color: color,
          position: 'absolute',
          'white-space': 'nowrap',
        });
        // ==========================================

        // ===========第3部分，显示移动方向位置及颜色=========================
        // 从右侧开始向下移动
        if (direction == 'down' || direction == '') {
          $barrage
            .css({
              top: -barrageHeight,
            })
            .animate({ top: containerHeight }, 10000, function () {
              $(this).remove();
            });
        }
        // 从左侧开始向上移动
        if (direction == 'up') {
          $barrage
            .css({
              top: containerHeight,
            })
            .animate({ top: -barrageHeight }, 10000, function () {
              $(this).remove();
            });
        }
      }
    </script>
  </body>
</html>