js 多行/多列的滚动代码

在JavaScript中实现多行或多列的滚动效果，通常涉及到CSS的overflow属性以及JavaScript对元素内容的动态更新。以下是一个简单的示例，展示如何创建一个多行滚动文本的效果：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-line Scrolling Text</title>
<style>
  .scrolling-text {
    width: 300px;
    height: 100px;
    overflow: hidden; /* 隐藏溢出的内容 */
    border: 1px solid #000;
    position: relative;
  }
  .scrolling-text p {
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 33.33px; /* 根据行高调整 */
    text-align: center;
  }
</style>
</head>
<body>

<div class="scrolling-text" id="scrollingText">
  <p>这是第一行滚动文本。</p>
  <p>这是第二行滚动文本。</p>
  <p>这是第三行滚动文本。</p>
</div>

<script>
  // JavaScript代码将放在这里
</script>

</body>
</html>

JavaScript

function scrollText(elementId) {
  const element = document.getElementById(elementId);
  const paragraphs = element.getElementsByTagName('p');
  let currentIndex = 0;

  function scroll() {
    // 隐藏当前行
    paragraphs[currentIndex].style.opacity = 0;
    currentIndex = (currentIndex + 1) % paragraphs.length;
    // 显示下一行
    paragraphs[currentIndex].style.opacity = 1;
  }

  // 设置定时器，每隔一段时间滚动一行
  setInterval(scroll, 2000); // 2秒滚动一行
}

// 初始化滚动效果
scrollText('scrollingText');

解释

HTML结构：创建一个包含多行文本的div元素，每行文本放在一个p标签中。
CSS样式：设置div的宽度和高度，并使用overflow: hidden隐藏溢出的内容。每个p标签设置为绝对定位，以便它们可以堆叠在一起。
JavaScript逻辑：定义一个scrollText函数，该函数接受一个元素ID作为参数。函数内部使用setInterval定时器每隔一段时间改变当前可见的文本行。