我們常常在一些飛行遊戲中見到一些可以迴圈進行的背景，那麼它是怎麼實現的呢？自己思考了一下，就寫了一個Demo，並且把製作的思路也分享出來，拋磚引玉，如果有朋友有更好的寫法，也歡迎向我拍磚，幫助我提高：）

當然jQuery來實現更為簡單方便，不過還是儘可能堅持用原生來寫，對基本功的培養有很好的幫助。

不廢話了，首先丟Demo，演示地址請點選我，請在Chorme模擬器的iPhone6模式下模擬

首先我們說說思路，我們需要一張充滿螢幕的背景圖片，並且使它勻速上卷，同時需要另一張同樣充滿螢幕的背景圖片，無縫緊接上一副以同樣的速度上卷。

而當上一幅圖片完全移出畫布時，又會從畫布的最低端重新開始，並且緊接第二幅，成為一個永續迴圈的結構。如下圖：

有了思路，具體執行程式碼就很簡單了，我們來一步一步進行：

　
html方面

我們只需建立兩個層，

<div id="topBg"></div>
<div id="btmBg"></div>

這樣即可，這就是用來控制背景A和背景B的圖層
　

CSS方面

* {margin:0; padding:0;} /*取消html預設的內外邊距*/
html {overflow-y:hidden;} /*當文件高度超過視窗時將滾動條隱藏並且禁止頁面上下滑動*/

/*給兩個準備迴圈滾動的背景圖層宣告樣式，將兩個圖層稍微調整成不同的顏色，是為了之後演示的時候能夠一目瞭然。*/
 

#topBg {width:100%; height:100%; background:#090; position:absolute; left:0; z-index:1;}
#btmBg {width:100%; height:100%; background:#09c; position:absolute; left:0; z-index:1;}

　
JavaScript方面

var screenHeight = window.innerHeight; //建立一個叫做screenHeight的變數，用來獲取視窗的高度

var topBg = document.getElementById("topBg"); //繫結topBg
 

topBg.style.top = 0;  //設定topBg圖層的top屬性

var btmBg = document.getElementById("btmBg")  //繫結BtmBg
btmBg.style.top = screenHeight + "px"; //設定btmBg圖層的top屬性

//宣告moveTopBg和moveBtmBg兩個變數，並且關聯兩個圖層的top屬性
var moveTopBg = topBg.style.top;
var moveBtmBg = btmBg.style.top;
/*
注意原生JavaScript這裡有一個坑：
如果直接寫成var topBg = document.getElementById("topBg").style.top，用alert(topBg)時不會返回任何結果，然而我重新宣告一個變數moveTopBg，繫結topBg.style.top，再alert(moveTopBg)就可以返回正確的值了，請十分注意。
*/

var speed = 11; //設定捲動速度
/*
注意這個值必須能夠現在主流的所有解析度高度整除，否則會出現錯誤。我是假設在375*627的iPhone6螢幕上執行的。如果想要相容所有的瀏覽器，可以用js進行運算處理。
*/

function move(){
    //設定moveTopBg和moveBtmBg的移動距離，由於這兩個變數目前是一個字串，無法進行相加的運算，所以用parseInt()方法轉換成數字
    moveTopBg = parseInt(moveTopBg) - speed + "px";
    moveBtmBg = parseInt(moveBtmBg) - speed + "px";

    //將進行過運算的moveTopBg和moveBtmBg更新給兩個需要捲動的背景圖層
    topBg.style.top = moveTopBg;
    btmBg.style.top = moveBtmBg;

    //設定條件，當背景圖A的移動距離，和螢幕的高度相加完全等於0的時候(也就是完全向上捲動消失)，執行以下程式碼。這個時候將背景圖A的top屬性重新設定到螢幕的最底端
    if(parseInt(moveTopBg) + screenHeight == 0){
        moveTopBg = screenHeight + "px";
        topBg.style.top = moveTopBg;
    }
    //同上，這次設定的是背景圖B
    if(parseInt(moveBtmBg) + screenHeight == 0){
        moveBtmBg = screenHeight + "px";
        btmBg.style.top = moveBtmBg;
    }

    //設定定時器，每200毫秒執行一次本方法​
    setTimeout(function(){
        move();
    },200);

}

move();  //頁面載入完自動自動執行move()方法

　
至此這樣一個捲動背景的小功能點就實現了。