JS原生实现连续滚动文字，打造酷炫页面元素

2023-10-14 02:03:41

现在网页设计中，经常会看到一些特别有趣的连续滚动文字，这是一种非常吸引人眼球的效果，并且可以带来很好的视觉体验。在本文中，我们将讨论如何在没有jQuery库的情况下，使用原生JavaScript实现连续滚动文字。

HTML结构

首先，我们需要一个容器元素来包含我们的文字。这个容器元素可以是一个div、p或任何其他块级元素。在容器元素中，我们将放置一个span元素来容纳我们的滚动文字。

<div id="container">
  <span id="text">This is a continuously scrolling text</span>
</div>

CSS样式

接下来，我们需要一些CSS样式来设置我们的容器元素和滚动文字。我们需要给容器元素设置一个高度和宽度，以便它能够容纳我们的滚动文字。我们还将设置滚动文字的字体、颜色和大小。

#container {
  height: 200px;
  width: 300px;
  overflow: hidden;
}

#text {
  font-family: Arial, sans-serif;
  font-size: 20px;
  color: #fff;
  white-space: nowrap;
  animation: scroll 10s infinite linear;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

JavaScript代码

现在，我们需要使用JavaScript来实现滚动文字效果。我们将创建一个函数来不断地移动我们的滚动文字。这个函数将使用requestAnimationFrame()方法，它是一个浏览器API，可以让我们在每次屏幕刷新时运行我们的代码。

function scrollText() {
  var text = document.getElementById("text");

  // 获取滚动文字的宽度
  var textWidth = text.offsetWidth;

  // 获取容器元素的宽度
  var containerWidth = document.getElementById("container").offsetWidth;

  // 计算滚动文字的移动距离
  var scrollDistance = textWidth - containerWidth;

  // 将滚动文字向左移动
  text.style.transform = "translateX(-" + scrollDistance + "px)";

  // 继续滚动文字
  requestAnimationFrame(scrollText);
}

// 开始滚动文字
scrollText();