css + js實現無縫滾動字幕

利用js和css就可以很方便的實現一個無縫滾動字幕，使得列表在一個方框裡不停滾動

目錄

實現思路

定義兩個滾動塊，內容一模一樣，從下往上兩個緊挨著滾動，當第一個滾動塊滾動出容器時（即第二個滾動塊頂到了容器的上邊緣），此時我們將第一個滾動塊設定位置到容器上邊緣，由於兩個滾動塊一模一樣，從效果上我們也看不出來容器的內容發生了替換。

html 程式碼

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

為了區分效果，我將兩個塊分別內容設為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 程式碼

var LEN = 200;      // 一個完整滾動條的長度
var x = 0;
var t;
window.onload = roll;
function roll() {
     var $col1 = document.getElementById("col1");
     var $col2 = document.getElementById("col2");

     var fun = function(){
         $col1.style.top = x + 'px';
         $col2.style.top = (x + LEN) + 'px';
         x--;
         if( (x + LEN) == 0 ){
             x = 0;
         }
     };
     t = setInterval(fun,1000);
}
// 可以再加上滑鼠移入停止滾動的函式，這個可以參考我上一篇部落格

懶得匯入jquery庫所以用純js實現

原始碼下載

下載地址

上一篇部落格地址