js让文字无缝来回滚动

基础概念

文字无缝来回滚动是一种常见的网页动画效果，通过JavaScript控制DOM元素的样式属性，使其在一定区域内来回移动，达到视觉上的连续滚动效果。

类型

水平滚动：文字从左到右或从右到左移动。
垂直滚动：文字从上到下或从下到上移动。
循环滚动：文字到达边界后无缝返回起点继续滚动。

应用场景

新闻网站：实时更新的新闻标题滚动显示。
社交媒体：动态更新的推文或消息流。
广告横幅：产品广告的循环展示。

示例代码

以下是一个简单的JavaScript实现文字水平无缝来回滚动的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字无缝滚动</title>
<style>
  #scrollingText {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
  }
  .scrollingContent {
    display: inline-block;
    padding-left: 100%;
    animation: scroll 15s linear infinite;
  }
  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
</style>
</head>
<body>

<div id="scrollingText">
  <span class="scrollingContent">这是一个无缝滚动的文字示例，欢迎查看！ </span>
</div>

<script>
  // 可以在这里添加更多的逻辑来控制滚动速度或内容
</script>

</body>
</html>