使用 JS 實現文字上下跑馬燈

Ø  前言

今天在做商城首頁時，遇到一個上下跑馬燈功能，因為之前也只是接觸過左右的跑馬燈，一時還不知道從何下手。在網上看了幾個 demo，並親自運行了一下，是可以實現的。但是，能運行不知其所以然也不行，所以還需要自己編碼去真正的理解，下面是我的示例。

 

1.   首先定義 css 樣式

#div1{

    width: 180px;

    margin: auto;

    border: 1px solid blue;

    overflow: hidden;   /*必須設置該屬性*/

}

.child{

    width: 100%;

    height: 100%;

    text-align: center;

    line-height: 30px;

}

 

2.   Js 代碼

var div1;           //外層div

var height = 30;    //外層div高度

var rollIndex = 0;  //當前滾動的索引

var millisec = 2000;    //滾動間隔時間（毫秒）

var intervalIds = new Array();  //計時器 id 數組

var datas = ["上下滾動跑馬燈1", "上下滾動跑馬燈2", "上下滾動跑馬燈3"];

 

window.onload = function() {

    div1 = document.getElementById("div1");

    div1.style.height = height + "px";

    //鼠標進入停止滾動

    div1.onmouseover = function() {

        clearInterval(intervalIds[0]);

    }

    //鼠標離開開始滾動

    div1.onmouseout = function() {

        intervalIds[0] = setInterval("addItem()", millisec);

    }

    addItem();  //首先加載第一項

    intervalIds[0] = setInterval("addItem()", millisec);

}

 

//添加滾動項

function addItem(){

    var content = datas[rollIndex];

    console.log("滾動item: " + rollIndex)

    if(div1.childNodes.length <= 1) {

        var div = document.createElement("div");

        div.setAttribute("class", "child");

        div.innerHTML = content;

        div1.appendChild(div);

        //設置兩個 div 的背景色

        if(rollIndex % 2 == 0)

            div.style.background = "#EEE9E9";

        else

            div.style.background = "#F0FFF0";

    }

    else {

        div1.childNodes[0].innerHTML = content;

        div1.appendChild(div1.childNodes[0]);

        div1.scrollTop = 0; //兼容Firefox

    }

    rollIndex++;

    rollIndex = rollIndex < datas.length ? rollIndex : 0;

    if(div1.childNodes.length > 1) {

        clearInterval(intervalIds[1]);

        intervalIds[1] = setInterval("setScroll()", 20);

    }

}

 

//設置外層div.scrollTop

function setScroll(){

    div1.scrollTop++;

    if(div1.scrollTop >= height) {

        clearInterval(intervalIds[1]);

        console.log("stop");

    }               

}

 

3.   Html 代碼

<div id="div1"></div>

 

4.   運行效果

 

Ø  總結

看代碼其實並不難，但是當時我還真沒看明白是如何實現滾動的。

其實是這樣：

1.   首先加如一個div。

2.   然后再追加一個div，此時開始滾動（第一個div慢慢從上面移除，第二個div就隨着從下面浮現出來）。

3.   第三次進入，就不再追加div了，只是將第一個的內容（也就是innerHTML）改變成新的內容，然后再將這個div重新追加（其實是調換了位置（這點很重要））到下面，然后再次滾動就看到了新的內容的div了，最后就這樣反復循環。