JS实现无缝隙跑马灯

以下是一个简单的示例，使用HTML、CSS和JavaScript实现无缝隙跑马灯：

HTML代码：

第一条消息
第二条消息
第三条消息
第四条消息
第五条消息

CSS代码：

.marquee {overflow: hidden;position: relative;
}.marquee ul {position: absolute;top: 0;left: 0;width: 100%;margin: 0;padding: 0;display: flex;animation: marquee 10s linear infinite;
}.marquee li {list-style: none;margin-right: 30px;
}@keyframes marquee {0% {transform: translateX(0%);}100% {transform: translateX(-100%);}
}

JavaScript代码：

const marquee = document.querySelector('.marquee ul');
const marqueeItems = marquee.querySelectorAll('li');// 将最后一个元素复制到列表的开头
marquee.insertBefore(marqueeItems[marqueeItems.length - 1].cloneNode(true), marqueeItems[0]);// 监听动画结束并将拼接的元素移动到列表末尾
marquee.addEventListener('animationiteration', () => {const firstItem = marquee.querySelector('li');const lastItem = marquee.querySelector('li:last-of-type');marquee.insertBefore(lastItem.cloneNode(true), firstItem);marquee.removeChild(lastItem);
});

此示例将5条消息滚动显示。动画持续10秒钟，并无限循环。JavaScript代码使用animationiteration事件来检测动画何时结束，将第一个元素复制到列表的末尾，然后将拼接的元素移动到列表末尾。这样就可以实现无缝隙的跑马灯效果。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！