js实现最新消息滚动效果

要实现最新的消息滚动效果，通常会用到JavaScript结合CSS来完成。以下是一个基础的示例，展示如何实现一个简单的消息滚动效果：

HTML结构

<div id="message-container" class="message-box">
  <div class="message">最新消息1</div>
  <div class="message">最新消息2</div>
  <div class="message">最新消息3</div>
  <!-- 更多消息 -->
</div>

CSS样式

.message-box {
  width: 300px;
  height: 100px;
  overflow: hidden; /* 隐藏溢出的内容 */
  position: relative; /* 设置相对定位以便内部元素绝对定位 */
}

.message {
  position: absolute; /* 绝对定位 */
  width: 100%;
  height: 100%;
  display: none; /* 默认隐藏所有消息 */
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

JavaScript逻辑

function showNextMessage() {
  const container = document.getElementById('message-container');
  const messages = container.getElementsByClassName('message');
  let currentIndex = 0;

  function show() {
    // 隐藏所有消息
    for (let i = 0; i < messages.length; i++) {
      messages[i].style.display = 'none';
    }
    // 显示当前消息
    messages[currentIndex].style.display = 'flex';
    // 更新索引
    currentIndex = (currentIndex + 1) % messages.length;
  }

  // 初始显示第一条消息
  show();
  // 设置定时器，每隔一段时间切换到下一条消息
  setInterval(show, 3000); // 每3秒切换一次
}

// 页面加载完成后开始显示消息
window.onload = showNextMessage;