如何在 HTML 中自动滚动文本(1)

📌 相关文章

📜 如何在 HTML 中自动滚动文本(1)

📅 最后修改于: 2023-12-03 15:24:11.752000 🧑 作者: Mango

如何在 HTML 中自动滚动文本

在 HTML 页面中，有时我们需要让一些文本自动滚动，以便更好地展示内容。这篇文章将会介绍如何在 HTML 中实现自动滚动文本。

使用 CSS 实现自动滚动文本

我们可以用 CSS 中的 @keyframes 和 animation 属性来实现自动滚动文本。

代码示例：

<style>
.scroll {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}
</style>

<div class="scroll">在这里输入需要滚动的文本信息</div>

效果如下：

scroll-text

解释说明：

width: 100%; 使元素的宽度占据整个容器
white-space: nowrap; 禁止文本换行
overflow: hidden; 隐藏元素中超出容器大小的内容
animation: marquee 5s linear infinite; 绑定动画效果，滚动时间为 5 秒，线性变化，无限循环
@keyframes marquee 定义动画效果关键帧
transform: translate() 将元素在容器内平移，实现滚动效果

使用 JavaScript 实现自动滚动文本

我们也可以用 JavaScript 来实现自动滚动文本，下面的代码演示了如何用 JavaScript 来实现自动滚动文本。

代码示例：

<div id="scroll-container">
  <div id="scroll-text"></div>
</div>

<script>
var scrollText = document.getElementById('scroll-text');
scrollText.innerHTML = '在这里输入需要滚动的文本信息';

function scroll() {
  scrollText.style.transform = 'translateX(' + -scrollText.offsetWidth + 'px)';
  scrollText.style.transition = 'transform 5s linear';
  setTimeout(reset, 5000);
}

function reset() {
  scrollText.style.transform = 'translateX(' + 0 + 'px)';
  scrollText.style.transition = '';
  setTimeout(scroll, 0);
}

setTimeout(scroll, 0);
</script>

效果如下：

scroll-text

解释说明：

用 JavaScript 设置了一个定时器，在页面加载后立即执行
scrollText.innerHTML 可以用来设置元素的文本内容
scroll 函数表示滚动效果，reset 函数表示重置效果
用 transition 属性定义滚动的时间、运动曲线等信息
定时器的方式可以让滚动不停止，因此我们只需要在 reset 函数中等待滚动结束后再次调用 scroll 函数即可。

完整代码在这里：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>自动滚动文本</title>
    <style>
      #scroll-container {
        width: 100%;
        overflow: hidden;
        position: relative;
      }
      #scroll-text {
        position: absolute;
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <div id="scroll-container">
      <div id="scroll-text"></div>
    </div>
    <script>
      var scrollText = document.getElementById('scroll-text');
      scrollText.innerHTML = '在这里输入需要滚动的文本信息';

      function scroll() {
        scrollText.style.transform = 'translateX(' + -scrollText.offsetWidth + 'px)';
        scrollText.style.transition = 'transform 5s linear';
        setTimeout(reset, 5000);
      }

      function reset() {
        scrollText.style.transform = 'translateX(' + 0 + 'px)';
        scrollText.style.transition = '';
        setTimeout(scroll, 0);
      }

      setTimeout(scroll, 0);
    </script>
  </body>
</html>

以上就是如何在 HTML 中实现自动滚动文本的两种方式，大家可以根据实际需求选择使用。