第三方实现跑马灯和手写实现跑马灯

最新推荐文章于 2025-03-26 15:28:30 发布

동경

最新推荐文章于 2025-03-26 15:28:30 发布

阅读量1k

点赞数

分类专栏： Js Intereting Computer Html Css 文章标签：前端手写跑马灯跑马灯

本文链接：https://blog.csdn.net/weixin_43814775/article/details/129112558

版权

Intereting Computer 同时被 3 个专栏收录

31 篇文章

订阅专栏

29 篇文章

订阅专栏

Html Css

27 篇文章

订阅专栏

本文展示了如何使用CSS、HTML和JavaScript手写实现跑马灯效果，以及引用了两个第三方跑马灯组件的链接。代码包括设置滚动速度、初始化跑马灯内容和实现文字横向滚动的函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第三方实现跑马灯

https://vue3-marquee.vercel.app/guide.html#changes-from-v2
https://evodiaaut.github.io/vue-marquee-text-component/

手写实现跑马灯

CSS部分

    <style>
      .marquee-wrap {
        box-sizing: border-box;
        width: 814px;
        height: 36px;
        background-color: rgba(255, 255, 255, 0);
        background-image: linear-gradient(
          to left,
          rgba(255, 255, 255, 0),
          #dfbb7b,
          rgba(255, 255, 255, 0)
        );
        line-height: 24px;
        font-size: 16px;
        text-align: center;
        border-radius: 5px;
        overflow: hidden;
        user-select: none;
        color: #181818;
        position: absolute;
        top: 290px;
        left: 58%;
        transform: translateX(-50%);
      }

      .scroll_div {
        white-space: nowrap;
        overflow: hidden;
      }

      .scroll_div pre {
        display: inline-block;
        height: 36px;
        margin: 0px;
        line-height: 36px;
      }
    </style>

HTML部分

    <div class="marquee-wrap">
      <div class="marquee-content">
        <div class="scroll_div">
          <pre class="scroll_begin" id="marqueeList"></pre>
          <pre class="scroll_end" style="display: inline-block"></pre>
        </div>
      </div>
    </div>

JS部分

<script>
      initMarquee();
      // 设置滚动
      var scroll_div = document.getElementsByClassName("scroll_div")[0];
      var scroll_begin = document.getElementsByClassName("scroll_begin")[0];
      var scroll_end = document.getElementsByClassName("scroll_end")[0];
      function initMarquee() {
        var processedCfg = {};
        // 假数据
        processedCfg.marqueeList = [
          { id: 1, user: "2624*****", name: " 黯晶巨牛 阿利斯塔 " },
          { id: 2, user: "2624*****", name: " 咖啡甜心 索拉卡 " },
          { id: 3, user: "2624*****", name: " 防暴机器人 布里茨 " },
          { id: 4, user: "2624*****", name: " 创世之神 内瑟斯 " },
          { id: 5, user: "2624*****", name: " 秩序之舌 塔姆 " },
          { id: 6, user: "2624*****", name: " 摄魂男爵 弗拉基米尔 " },
          { id: 7, user: "2624*****", name: " 传统造型 特朗德尔 " },
          { id: 8, user: "2624*****", name: " 夜行义贼 艾瑞莉娅 " },
          { id: 9, user: "3012*****", name: " 海贼 瑞兹 " },
          { id: 10, user: "3561*****", name: " 灵魂烈焰 布兰德 " },
          { id: 11, user: "1104*****", name: " 恶咒亡魂 魔腾 " },
          { id: 12, user: "1228*****", name: " 炎爆 慎 " },
          { id: 13, user: "1340*****", name: " 苍穹之光 维克兹 " },
          { id: 14, user: "3080*****", name: " 极度深寒 拉莫斯 " },
          { id: 15, user: "1198*****", name: " 战斗学院 永恩 " },
          { id: 16, user: "9748*****", name: " 光明哨兵 艾瑞莉娅 " },
          { id: 17, user: "1612*****", name: " 魔幻卡牌 崔斯特 " },
          { id: 18, user: "9748*****", name: " 猎天使魔女 薇恩 " },
          { id: 19, user: "2421*****", name: " 冰雪节 辛吉德 " },
          { id: 20, user: "4039*****", name: " 霹雳游侠 弗拉基米尔 " },
          { id: 21, user: "1915*****", name: " 奥术师 萨科 " },
          { id: 22, user: "2864*****", name: " 屠龙勇士 图奇 " },
          { id: 23, user: "2864*****", name: " 虚空执事 玛尔扎哈 " },
          { id: 24, user: "2864*****", name: " 银河魔装机神 菲兹 " },
          { id: 25, user: "4039*****", name: " 糖果女巫 璐璐 " },
          { id: 26, user: "1607*****", name: " 飞车暴走族 古拉加斯 " },
          { id: 27, user: "1249*****", name: " 梅花国王 莫德凯撒 " },
          { id: 28, user: "1249*****", name: " 野兽猎人 德莱文 " },
          { id: 29, user: "1249*****", name: " 战地之王 加里奥 " },
          { id: 30, user: "4119*****", name: " 圣诞捣蛋鬼 金克丝 " },
          { id: 31, user: "1249*****", name: " 雪默丁格 " },
          { id: 32, user: "8772*****", name: " 黯晶战神 赛恩 " },
          { id: 33, user: "8772*****", name: " 持胡萝卜的雪人 易 " },
          { id: 34, user: "1781*****", name: " 绿茵门神 茂凯 " },
          { id: 35, user: "4039*****", name: " 品酒大师 古拉加斯 " },
          {
            id: 36,
            user: "8772*****",
            name: " 五杀摇滚 III：遗失的章节 卡尔萨斯 "
          }
        ];
        var marqueeListHtml = "";
        for (var i in processedCfg.marqueeList) {
          marqueeListHtml +=
            "<span>用户 " +
            processedCfg.marqueeList[i].user +
            " 抽中 " +
            processedCfg.marqueeList[i].name +
            " </span>";
        }
        document.getElementById("marqueeList").innerHTML = marqueeListHtml;

        scroll_div = document.getElementsByClassName("scroll_div")[0];
        scroll_begin = document.getElementsByClassName("scroll_begin")[0];
        scroll_end = document.getElementsByClassName("scroll_end")[0];
        if (scroll_begin && scroll_begin.offsetWidth > scroll_div.offsetWidth) {
          ScrollImgLeft();
          scroll_end.style.display = "inline-block";
        }

        // 文字横向滚动
        function ScrollImgLeft() {
          var speed = 100; // 滚动速度
          var MyMar = null; // 计时器
          scroll_end.innerText = scroll_begin.innerText;
          function Marquee() {
            if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0) {
              scroll_div.scrollLeft -= scroll_begin.offsetWidth;
            } else {
              scroll_div.scrollLeft += 2;
            }
          }
          MyMar = setInterval(Marquee, speed);
        }
      }
    </script>

手写实现跑马灯【整体代码】

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>走马灯</title>
    <style>
      .marquee-wrap {
        box-sizing: border-box;
        width: 814px;
        height: 36px;
        background-color: rgba(255, 255, 255, 0);
        background-image: linear-gradient(
          to left,
          rgba(255, 255, 255, 0),
          #dfbb7b,
          rgba(255, 255, 255, 0)
        );
        line-height: 24px;
        font-size: 16px;
        text-align: center;
        border-radius: 5px;
        overflow: hidden;
        user-select: none;
        color: #181818;
        position: absolute;
        top: 290px;
        left: 58%;
        transform: translateX(-50%);
      }

      .scroll_div {
        white-space: nowrap;
        overflow: hidden;
      }

      .scroll_div pre {
        display: inline-block;
        height: 36px;
        margin: 0px;
        line-height: 36px;
      }
    </style>
  </head>
  <body>
    <div class="marquee-wrap">
      <div class="marquee-content">
        <div class="scroll_div">
          <pre class="scroll_begin" id="marqueeList"></pre>
          <pre class="scroll_end" style="display: inline-block"></pre>
        </div>
      </div>
    </div>

    <script>
      initMarquee();
      // 设置滚动
      var scroll_div = document.getElementsByClassName("scroll_div")[0];
      var scroll_begin = document.getElementsByClassName("scroll_begin")[0];
      var scroll_end = document.getElementsByClassName("scroll_end")[0];
      function initMarquee() {
        var processedCfg = {};
        // 假数据
        processedCfg.marqueeList = [
          { id: 1, user: "2624*****", name: " 黯晶巨牛 阿利斯塔 " },
          { id: 2, user: "2624*****", name: " 咖啡甜心 索拉卡 " },
          { id: 3, user: "2624*****", name: " 防暴机器人 布里茨 " },
          { id: 4, user: "2624*****", name: " 创世之神 内瑟斯 " },
          { id: 5, user: "2624*****", name: " 秩序之舌 塔姆 " },
          { id: 6, user: "2624*****", name: " 摄魂男爵 弗拉基米尔 " },
          { id: 7, user: "2624*****", name: " 传统造型 特朗德尔 " },
          { id: 8, user: "2624*****", name: " 夜行义贼 艾瑞莉娅 " },
          { id: 9, user: "3012*****", name: " 海贼 瑞兹 " },
          { id: 10, user: "3561*****", name: " 灵魂烈焰 布兰德 " },
          { id: 11, user: "1104*****", name: " 恶咒亡魂 魔腾 " },
          { id: 12, user: "1228*****", name: " 炎爆 慎 " },
          { id: 13, user: "1340*****", name: " 苍穹之光 维克兹 " },
          { id: 14, user: "3080*****", name: " 极度深寒 拉莫斯 " },
          { id: 15, user: "1198*****", name: " 战斗学院 永恩 " },
          { id: 16, user: "9748*****", name: " 光明哨兵 艾瑞莉娅 " },
          { id: 17, user: "1612*****", name: " 魔幻卡牌 崔斯特 " },
          { id: 18, user: "9748*****", name: " 猎天使魔女 薇恩 " },
          { id: 19, user: "2421*****", name: " 冰雪节 辛吉德 " },
          { id: 20, user: "4039*****", name: " 霹雳游侠 弗拉基米尔 " },
          { id: 21, user: "1915*****", name: " 奥术师 萨科 " },
          { id: 22, user: "2864*****", name: " 屠龙勇士 图奇 " },
          { id: 23, user: "2864*****", name: " 虚空执事 玛尔扎哈 " },
          { id: 24, user: "2864*****", name: " 银河魔装机神 菲兹 " },
          { id: 25, user: "4039*****", name: " 糖果女巫 璐璐 " },
          { id: 26, user: "1607*****", name: " 飞车暴走族 古拉加斯 " },
          { id: 27, user: "1249*****", name: " 梅花国王 莫德凯撒 " },
          { id: 28, user: "1249*****", name: " 野兽猎人 德莱文 " },
          { id: 29, user: "1249*****", name: " 战地之王 加里奥 " },
          { id: 30, user: "4119*****", name: " 圣诞捣蛋鬼 金克丝 " },
          { id: 31, user: "1249*****", name: " 雪默丁格 " },
          { id: 32, user: "8772*****", name: " 黯晶战神 赛恩 " },
          { id: 33, user: "8772*****", name: " 持胡萝卜的雪人 易 " },
          { id: 34, user: "1781*****", name: " 绿茵门神 茂凯 " },
          { id: 35, user: "4039*****", name: " 品酒大师 古拉加斯 " },
          {
            id: 36,
            user: "8772*****",
            name: " 五杀摇滚 III：遗失的章节 卡尔萨斯 "
          }
        ];
        var marqueeListHtml = "";
        for (var i in processedCfg.marqueeList) {
          marqueeListHtml +=
            "<span>用户 " +
            processedCfg.marqueeList[i].user +
            " 抽中 " +
            processedCfg.marqueeList[i].name +
            " </span>";
        }
        document.getElementById("marqueeList").innerHTML = marqueeListHtml;

        scroll_div = document.getElementsByClassName("scroll_div")[0];
        scroll_begin = document.getElementsByClassName("scroll_begin")[0];
        scroll_end = document.getElementsByClassName("scroll_end")[0];
        if (scroll_begin && scroll_begin.offsetWidth > scroll_div.offsetWidth) {
          ScrollImgLeft();
          scroll_end.style.display = "inline-block";
        }

        // 文字横向滚动
        function ScrollImgLeft() {
          var speed = 100; // 滚动速度
          var MyMar = null; // 计时器
          scroll_end.innerText = scroll_begin.innerText;
          function Marquee() {
            if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0) {
              scroll_div.scrollLeft -= scroll_begin.offsetWidth;
            } else {
              scroll_div.scrollLeft += 2;
            }
          }
          MyMar = setInterval(Marquee, speed);
        }
      }
    </script>
  </body>
</html>