js 实现弹幕滚动_js大屏弹幕实时-CSDN博客

本文链接：https://blog.csdn.net/a2158155143/article/details/145060706

使用js实现弹幕滚动效果，数据可实时或请求接口。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹幕滚动</title>
</head>
<body>
  <div class="danmu-box">
    <div class="danmaku-container"></div>
  </div>
</body>

<script>
  
  let index = 0; // 弹幕索引

   // 函数用于创建新的弹库
   function createDanmaku(obj) {
      // Create a new danmaku element
      var danmaku = document.createElement("div");
      danmaku.classList.add("danmaku");
      console.log(obj)
      danmaku.innerText = obj.text

      //设置danmaku顶部位置为0到容器高度之间的随机值
      var container = document.querySelector(".danmaku-container");
      // 300 到 600 之间的随机值
      let num1 = Math.floor(Math.random() * 300) + 30;
      let num2 = num1 + 100 + Math.floor(Math.random() * 300)
      if (num2 > 600) { num2 = 600}
      const randomNum = obj.id % 2 === 0 ? num1 : num2
      // console.log('container.offsetHeight', randomNum)
      danmaku.style.top = randomNum + "px"
  
      //添加danmaku到容器
      container.appendChild(danmaku);
      // console.log('container.offsetHeight', danmaku.offsetWidth)

     //设置danmaku位置到容器的右边缘
      danmaku.style.right = -danmaku.offsetWidth + "px";


      //将danmaku动画到容器的左边缘
      var animationDuration = 8000; // 8 秒
      var danmakuWidth = danmaku.offsetWidth;
      var containerWidth = container.offsetWidth;
      var distance = containerWidth + danmakuWidth;
      var duration = (distance / containerWidth) * animationDuration;
      danmaku.style.transition = "transform " + duration + "ms linear";
      danmaku.style.transform = "translateX(-" + distance + "px)";

      // 动画完成后从容器中移除弹幕
      setTimeout(function() {
         danmaku.remove();
      }, duration);

    }

    // 函数生成随机弹库文本
    function generateDanmakuText() {
      const data = [
        {id: 1, text: "弹幕1"},
        {id: 2, text: "弹幕2"},
        {id: 3, text: "弹幕3"},
        {id: 4, text: "弹幕4"},
        {id: 5, text: "弹幕5"},
        {id: 6, text: "弹幕6"},
        {id: 7, text: "弹幕7"},
        {id: 8, text: "弹幕8"},
        {id: 9, text: "弹幕9"},
      ]
      if (index > data.length - 1) { index = 0 }
      return data[index]
    }

    setInterval(() => {
      console.log("setInterval")
      var item = generateDanmakuText()
      index++
      createDanmaku(item)
    }, 4000)

</script>

<style>
  html, body{ margin: 0; padding: 0;height:100%;overflow: hidden;}

  .danmu-box { background-color: rgba(255, 255, 255, 0.5); height: 100%; width: 100%; color: #fff; }
  .danmaku-container { font-size: 24px; overflow: hidden;}
  /* danmaku的样式 */
  .danmaku { position: absolute; top: 0;  white-space: nowrap; opacity: 0.8;  margin: 20px; z-index: 99; background: rgba(0, 0, 0, 0.3); padding: 10px 30px; border-radius: 30px; cursor: pointer;}
</style>
</html>