图文滚动js

<div class="scrolling-text">
  <div class="text-item">新闻1：这是第一条新闻。</div>
  <div class="text-item">新闻2：这是第二条新闻。</div>
  <div class="text-item">新闻3：这是第三条新闻。</div>
</div>

.scrolling-text {
  width: 100%;
  height: 100px; /* 设置固定高度 */
  overflow: hidden;
  position: relative;
}

.text-item {
  animation: scroll-up 15s linear infinite;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes scroll-up {
  0% { transform: translateY(100%); }
  5% { transform: translateY(0); }
  95% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

function addNews(news) {
  const scrollingText = document.querySelector('.scrolling-text');
  const newItem = document.createElement('div');
  newItem.className = 'text-item';
  newItem.textContent = news;
  scrollingText.appendChild(newItem);
}

// 示例调用
addNews('新闻4：这是第四条新闻。');