利用10行js代码实现上下滚动公告效果

当你想要在网站中展示一些跑马灯式的公告时，上下滚动效果是一种常见的解决方案。使用 JavaScript，可以用只有十几行代码的方式实现这种上下滚动效果。

以下是利用 10 行 js 代码实现上下滚动公告效果的完整攻略：

步骤1: 创建 HTML 页面

首先，我们需要在 HTML 页面中添加一个容器来放置滚动公告。我们可以使用 <div> 元素来创建这个容器。代码如下：

<div class="scrolling-container"></div>

此外，为了方便演示，我们也可以在该容器中添加一些测试数据。代码如下：

<div class="scrolling-container">
  <ul>
    <li>公告1</li>
    <li>公告2</li>
    <li>公告3</li>
    <li>公告4</li>
    <li>公告5</li>
    <li>公告6</li>
  </ul>
</div>

步骤2: 编写 JS 代码

我们需要用 JavaScript 来实现上下滚动的公告。代码如下：

function scrollingText() {
  const container = document.querySelector('.scrolling-container');
  const textList = container.querySelectorAll('li');
  let index = 0;

  setInterval(() => {
    textList[index].classList.remove('is-visible');
    index++;

    if (index === textList.length) {
      index = 0;
    }

    textList[index].classList.add('is-visible');
  }, 3000);
}

scrollingText();

以上代码包括 scrollingText() 函数，该函数定义了一个定时器，以每 3 秒的时间间隔滚动公告内容。在函数内，我们可以使用 querySelector() 和 querySelectorAll() 来选择相关元素，并使用 classList 来添加和移除 CSS 类，以便控制滚动公告的效果。

步骤3: 添加样式

最后，我们需要为滚动公告添加一些 CSS 样式，以控制公告的展示效果。代码如下：

.scrolling-container {
  border: 1px solid #ccc;
  height: 50px;
  overflow: hidden;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  padding: 5px;
  font-size: 16px;
}

.is-visible {
  animation: scroll-text 1s linear forwards;
}

@keyframes scroll-text {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

我们的 CSS 样式包括：

• .scrolling-container 的样式定义，用来设置公告容器的高度、边框和滚动属性。
• ul 和 li 的样式定义，用来设置公告内容的列表样式。
• .is-visible 的样式定义，用来设置动画效果的触发方式。
• @keyframes scroll-text 的样式定义，用来设置动画关键帧的样式。

现在，你可以使用以上代码和说明来创建一个简单的滚动公告效果了。

以下是两条示例说明：

示例1：

HTML 代码：

<div class="scrolling-container"></div>

JS 代码：

function scrollingText() {
  const container = document.querySelector('.scrolling-container');
  const textList = ['公告1', '公告2', '公告3', '公告4', '公告5', '公告6'];
  let index = 0;

  setInterval(() => {
    container.textContent = textList[index];
    index++;

    if (index === textList.length) {
      index = 0;
    }
  }, 3000);
}

scrollingText();

CSS 代码：

.scrolling-container {
  border: 1px solid #ccc;
  height: 30px;
  overflow: hidden;
  padding: 5px;
  font-size: 16px;
}

示例2：

HTML 代码：

<div class="scrolling-container">
  <ul>
    <li>公告1</li>
    <li>公告2</li>
    <li>公告3</li>
    <li>公告4</li>
    <li>公告5</li>
    <li>公告6</li>
  </ul>
</div>

JS 代码：

function scrollingText() {
  const container = document.querySelector('.scrolling-container');
  const textList = container.querySelectorAll('li');
  let index = 0;

  setInterval(() => {
    textList[index].classList.remove('is-visible');
    index++;

    if (index === textList.length) {
      index = 0;
    }

    textList[index].classList.add('is-visible');
  }, 3000);
}

scrollingText();

CSS 代码：

.scrolling-container {
  border: 1px solid #ccc;
  height: 50px;
  overflow: hidden;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  padding: 5px;
  font-size: 16px;
}

.is-visible {
  animation: scroll-text 1s linear forwards;
}

@keyframes scroll-text {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}