Material Design 中的动态文字跑马灯效果实现教程-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 开发中，动态文字跑马灯效果是非常常见的交互设计，它可以将重要的信息以流动的方式呈现给用户，增加用户的关注度和阅读体验。在 Material Design 中，动态文字跑马灯效果也被广泛应用。本文将介绍如何使用 HTML、CSS 和 JavaScript 实现 Material Design 中的动态文字跑马灯效果。

实现思路

动态文字跑马灯效果的实现思路很简单，即通过 JavaScript 控制文字的位置实现流动的效果。具体来说，我们可以通过 CSS 的 position 和 left 属性控制文字的位置，然后使用 JavaScript 定时更新 left 的值，使得文字不断移动。同时，为了实现流畅的效果，我们还需要在文字流动到一定位置时将其移动到初始位置。

HTML 结构

首先，我们需要在 HTML 中定义一个容器元素，用于包含跑马灯中的文字。容器元素的宽度应该根据文字的长度来计算，而高度可以根据需要设置。

<div class="marquee">
  <span class="text">这里是跑马灯中的文字</span>
  <span class="text">这里是跑马灯中的文字</span>
  <span class="text">这里是跑马灯中的文字</span>
</div>

CSS 样式

接下来，我们需要对容器元素和文字进行样式设置。容器元素应该设置为相对定位，以便于文字的绝对定位。文字应该设置为绝对定位，并根据需要设置字体、颜色等样式。此外，为了实现 Material Design 中的效果，我们还需要设置文字的阴影和动画。

.marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  width: auto;
  height: 40px;
}

.text {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 500;
  color: #2196f3;
  text-shadow: 0 0 20px rgba(33, 150, 243, 0.8);
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}

上述代码中，我们定义了一个名为 marquee 的动画，用于控制文字的流动。动画的 duration 设置为 10 秒，动画的 timing-function 设置为 linear，表示动画的速度是匀速的。动画的 iteration-count 设置为 infinite，表示动画会一直循环执行。

JavaScript 代码

最后，我们需要编写 JavaScript 代码，以便于动态更新文字的位置。具体来说，我们需要通过 JavaScript 获取容器元素和文字元素，并定时更新文字元素的 left 属性。同时，当文字流动到容器元素的右边缘时，我们需要将其移动到容器元素的左边缘，并继续执行动画。

var marquee = document.querySelector('.marquee');
var text = document.querySelectorAll('.text');

var speed = 1;
var delay = 10;
var width = 0;
var offset = 0;

for (var i = 0; i < text.length; i++) {
  width += text[i].offsetWidth;
}

marquee.style.width = width + 'px';

function tick() {
  offset += speed;
  if (offset > text[0].offsetWidth) {
    offset -= text[0].offsetWidth;
    marquee.appendChild(text[0]);
  }
  marquee.style.left = -offset + 'px';
  setTimeout(tick, delay);
}

tick();

上述代码中，我们首先通过 document.querySelector 和 document.querySelectorAll 方法获取容器元素和文字元素。然后，我们定义了一些变量，用于控制文字的速度、延迟、宽度和偏移量。变量 speed 表示文字的速度，变量 delay 表示文字的更新延迟，变量 width 表示文字的宽度，变量 offset 表示文字的偏移量。

接着，我们通过循环计算文字的宽度，并将其设置为容器元素的宽度。然后，我们定义了一个名为 tick 的函数，用于定时更新文字的位置。在 tick 函数中，我们首先更新文字的偏移量，并判断文字是否已经流动到容器元素的右边缘。如果是，则将第一个文字移动到容器元素的末尾，并重新计算偏移量。最后，我们将容器元素的 left 属性设置为负的偏移量，并通过 setTimeout 方法延迟一段时间后再次执行 tick 函数，以实现动态更新。

示例代码

下面是完整的示例代码，你可以将其复制到 HTML 文件中并运行，以查看效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Material Design 中的动态文字跑马灯效果实现教程</title>
  <style>
    .marquee {
      position: relative;
      overflow: hidden;
      white-space: nowrap;
      font-size: 16px;
      line-height: 1.5;
      color: #333;
      width: auto;
      height: 40px;
    }

    .text {
      position: absolute;
      top: 0;
      left: 0;
      font-weight: 500;
      color: #2196f3;
      text-shadow: 0 0 20px rgba(33, 150, 243, 0.8);
      animation: marquee 10s linear infinite;
    }

    @keyframes marquee {
      0% {
        left: 100%;
      }
      100% {
        left: -100%;
      }
    }
  </style>
</head>
<body>
  <div class="marquee">
    <span class="text">这里是跑马灯中的文字1</span>
    <span class="text">这里是跑马灯中的文字2</span>
    <span class="text">这里是跑马灯中的文字3</span>
  </div>
  <script>
    var marquee = document.querySelector('.marquee');
    var text = document.querySelectorAll('.text');

    var speed = 1;
    var delay = 10;
    var width = 0;
    var offset = 0;

    for (var i = 0; i < text.length; i++) {
      width += text[i].offsetWidth;
    }

    marquee.style.width = width + 'px';

    function tick() {
      offset += speed;
      if (offset > text[0].offsetWidth) {
        offset -= text[0].offsetWidth;
        marquee.appendChild(text[0]);
      }
      marquee.style.left = -offset + 'px';
      setTimeout(tick, delay);
    }

    tick();
  </script>
</body>
</html>

总结

本文介绍了如何使用 HTML、CSS 和 JavaScript 实现 Material Design 中的动态文字跑马灯效果。通过本文的学习，你可以掌握动态文字跑马灯效果的实现思路和具体细节，从而在自己的项目中应用该效果，提升用户的体验和交互效果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658d5c0feb4cecbf2d350e3b