以下是一个基本的横向滚动新闻标题效果的 JavaScript 实现:

HTML:
html

  • News 1
  • News 2
  • News 3
  • News 4
  • News 5

CSS:
css
.news-container {
width: 300px; /* 设置容器宽度 */
overflow: hidden; /* 隐藏溢出部分 */
white-space: nowrap; /* 禁用换行 */
}

.news-content ul {
margin: 0;
padding: 0;
display: inline;
animation: scroll-left 10s linear infinite; /* 设置动画 */
}

.news-content li {
display: inline-block;
margin-right: 20px; /* 设置新闻之间的间距 */
}

@keyframes scroll-left {
0% { transform: translateX(0); } /* 初始位置 */
100% { transform: translateX(-100%); } /* 平移至最左侧 */
}

JavaScript:(可选,如果需要停止和重新开始滚动)
javascript
var newsContent = document.querySelector('.news-content');
newsContent.addEventListener('mouseover', function() {
this.style.animationPlayState = 'paused'; /* 鼠标悬停时停止滚动 */
});

newsContent.addEventListener('mouseout', function() {
this.style.animationPlayState = 'running'; /* 鼠标离开时重新开始滚动 */
});

这个实现中,利用 CSS 的 `@keyframes` 动画实现了新闻标题的水平滚动效果。通过添加 JavaScript 的事件监听,可以实现鼠标悬停时停止滚动,鼠标离开时重新开始滚动的功能。