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

Dear 丶 2022-06-17 04:44 304阅读 0赞

# css + js实现无缝滚动字幕 #

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

**目录**

*  css js实现无缝滚动字幕
    
     *   *  实现思路
         *  html 代码
         *  css 代码
         *  js 代码
         *  源码下载
         *  上一篇博客地址

--------------------

### 实现思路 ###

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

### html 代码 ###

**为了区分效果，我将两个块分别内容设为1和2.**

### css 代码 ###

.box { position: relative; width: 100px; height: 90px; overflow: hidden; border: solid 1px; }
    .col1, .col2 { height: 200px; position: absolute; }
    .col2 { top:200px; } /* 让第二列顶着第一列的末尾*/

### js 代码 ###

**懒得导入jquery库所以用纯js实现**

--------------------

### 源码下载 ###

[下载地址][Link 1]

### 上一篇博客地址 ###

[css和js实现最简单的轮播图效果][css_js]

[往期博客地址][Link 2]

[Link 1]: http://download.csdn.net/detail/tom9238/9816468
[css_js]: http://blog.csdn.net/tom9238/article/details/70194504
[Link 2]: http://blog.csdn.net/tom9238