css + js实现简单无缝滚动字幕

最新推荐文章于 2024-08-08 07:54:25 发布

Routz

最新推荐文章于 2024-08-08 07:54:25 发布

阅读量9.9k

点赞数 4

分类专栏：前端文章标签： css html javascript

本文链接：https://blog.csdn.net/tom9238/article/details/70209551

版权

本文介绍了如何使用css和js创建无缝滚动字幕的效果。通过定义两个内容相同的滚动块，利用js控制其滚动位置，实现视觉上的无缝滚动。同时提供了html、css和js代码示例，并提供源码下载链接。

摘要由CSDN通过智能技术生成

css + js实现无缝滚动字幕

利用js和css就可以很方便的实现一个无缝滚动字幕，使得列表在一个方框里不停滚动

定义两个滚动块，内容一模一样，从下往上两个紧挨着滚动，当第一个滚动块滚动出容器时（即第二个滚动块顶到了容器的上边缘），此时我们将第一个滚动块设置位置到容器上边缘，由于两个滚动块一模一样，从效果上我们也看不出来容器的内容发生了替换。

<div class="box" id="box">
    <ul class="col1" id="col1">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>

关注

专栏目录