在现代 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 的动画，用于控制文字的流动。动画的 duration 设置为 10 秒，动画的 timing-function 设置为 linear，表示动画的速度是匀速的。动画的 iteration-count 设置为 infinite，表示动画会一直循环执行。
JavaScript 代码
最后，我们需要编写 JavaScript 代码，以便于动态更新文字的位置。具体来说，我们需要通过 JavaScript 获取容器元素和文字元素，并定时更新文字元素的 left 属性。同时，当文字流动到容器元素的右边缘时，我们需要将其移动到容器元素的左边缘，并继续执行动画。
-- -------------------- ---- ------- --- ------- - ----------------------------------- --- ---- - ----------------------------------- --- ----- - -- --- ----- - --- --- ----- - -- --- ------ - -- --- ---- - - -- - - ------------ ---- - ----- -- -------------------- - ------------------- - ----- - ----- -------- ------ - ------ -- ------ -- ------- - -------------------- - ------ -- -------------------- ----------------------------- - ------------------ - ------- - ----- ---------------- ------- - -------展开代码
上述代码中，我们首先通过 document.querySelector 和 document.querySelectorAll 方法获取容器元素和文字元素。然后，我们定义了一些变量，用于控制文字的速度、延迟、宽度和偏移量。变量 speed 表示文字的速度，变量 delay 表示文字的更新延迟，变量 width 表示文字的宽度，变量 offset 表示文字的偏移量。
接着，我们通过循环计算文字的宽度，并将其设置为容器元素的宽度。然后，我们定义了一个名为 tick 的函数，用于定时更新文字的位置。在 tick 函数中，我们首先更新文字的偏移量，并判断文字是否已经流动到容器元素的右边缘。如果是，则将第一个文字移动到容器元素的末尾，并重新计算偏移量。最后，我们将容器元素的 left 属性设置为负的偏移量，并通过 setTimeout 方法延迟一段时间后再次执行 tick 函数，以实现动态更新。
示例代码
下面是完整的示例代码，你可以将其复制到 HTML 文件中并运行，以查看效果。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------- ------ ----------------------- ------- -------- - --------- --------- --------- ------- ------------ ------- ---------- ----- ------------ ---- ------ ----- ------ ----- ------- ----- - ----- - --------- --------- ---- -- ----- -- ------------ ---- ------ -------- ------------ - - ---- -------- ---- ---- ----- ---------- ------- --- ------ --------- - ---------- ------- - -- - ----- ----- - ---- - ----- ------ - - -------- ------- ------ ---- ---------------- ----- ------------------------------- ----- ------------------------------- ----- ------------------------------- ------ -------- --- ------- - ----------------------------------- --- ---- - ----------------------------------- --- ----- - -- --- ----- - --- --- ----- - -- --- ------ - -- --- ---- - - -- - - ------------ ---- - ----- -- -------------------- - ------------------- - ----- - ----- -------- ------ - ------ -- ------ -- ------- - -------------------- - ------ -- -------------------- ----------------------------- - ------------------ - ------- - ----- ---------------- ------- - ------- --------- ------- -------展开代码
总结
本文介绍了如何使用 HTML、CSS 和 JavaScript 实现 Material Design 中的动态文字跑马灯效果。通过本文的学习，你可以掌握动态文字跑马灯效果的实现思路和具体细节，从而在自己的项目中应用该效果，提升用户的体验和交互效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658d5c0feb4cecbf2d350e3b
