廢話不多說，先看一個簡單的滾動效果（鼠標放上去的時候可以暫停滾動，谷歌版本 66.0.3359.139（正式版本）查看時會出現滾動混亂。單獨提出來的時候不會，應該是谷歌和博客園的某些不兼容優化造成的）：
代碼如下：
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> var oMarquee; //播報的容器 var BBLineH = 26; //單行高度，像素 var BBScrollAmount = 1; //每次滾動高度，像素
var BBLineCount = 6; //當前這批數據 實際行數 var rollRestTime = 2500; //一條新播報滾動完成后，距離下一次滾動的間隔時間 單位ms var rollTime = 10; //播報滾動中的刷新時間 單位ms /* * 啟動播報滾動事件 */ window.onload= function(){ BBAllTime = 0; oMarquee = document.getElementById("bobaodiv"); //滾動對象 window.setTimeout( "run()", rollRestTime ); } /* * 播報滾動事件主邏輯 */ function run() { if(BBScrollAmount == 0){//若單次滾動的距離為0，則開始下一次監聽，不計數 window.setTimeout( "run()", rollTime ); return; } if ( oMarquee.scrollTop >= BBLineCount * BBLineH ) {//滾動完一次數據后，復位 oMarquee.scrollTop = 0; } oMarquee.scrollTop += BBScrollAmount; if ( oMarquee.scrollTop % BBLineH < 1 && oMarquee.scrollTop > 0 ) { window.setTimeout( "run()", rollRestTime ); } else { window.setTimeout( "run()", rollTime ); } } </script> </head> <body > <div id="bobaodiv" style="overflow: hidden; height: 100px; width: 160px; border: 4px solid blue;" onmouseover="BBScrollAmount=0" onmouseout="BBScrollAmount=1"> <div style="border: 1px solid black; height: 24px; text-align: center;">第一個子DIV</div> <div style="border: 1px solid black; height: 24px; text-align: center;">第二個子DIV</div> <div style="border: 1px solid black; height: 24px; text-align: center;">第三個子DIV</div> <div style="border: 1px solid black; height: 24px; text-align: center;">第四個子DIV</div> <div style="text-align: center; border: 1px solid black; height: 24px;">第五個子DIV</div> <div style="text-align: center; border: 1px solid black; height: 24px;">第六個子DIV</div> <div style="text-align: center; border: 1px solid black; height: 24px;">第一個子DIV</div> <div style="text-align: center; border: 1px solid black; height: 24px;">第二個子DIV</div> <div style="text-align: center; border: 1px solid black; height: 24px;">第三個子DIV</div> <div style="text-align: center; border: 1px solid black; height: 24px;">第四個子DIV</div> </div> </body> </html>
接下來文章會分兩個階段來詳細介紹滾動播報。第一階段介紹簡單的實現方式，可以幫助大家了解滾動實現的基本原理，第二階段提供了適用性高的demo及api講解，可以直接引入項目。
第一階段
一.js屬性介紹
| 編號 | 屬性名 | 備注 |
|---|---|---|
| 1 | oMarquee | 播報展示的容器dom |
| 2 | BBLineH | 播報中每行的高度，必須精確，因為每滾動完一條數據時，需要停留一段時間，再進行下一次滾動 |
| 3 | BBScrollAmount | 每次頁面刷新，滾動的距離 |
| 4 | BBLineCount | 當前一共有多少條有效數據，用於判斷什么時候可以讓滾動位置歸零 |
| 5 | rollRestTime | 一條數據滾動完以后，停留的時間 |
| 6 | rollTime | 滾動時刷新頁面的間隔時間 |
滾動的動作是由scrollTop屬性實現的。該屬性可以設置標簽內部的 子標簽頭部 被隱藏的高度，進而實現上下滾動的效果。當然也可以使用scrollLeft實現左右滾動。
二.js方法介紹
滾動的操作是由一個定時的遞歸函數實現的。該函數通過【rollTime】 屬性來判斷在滾動期間，多久刷新一次滾動窗口，通過【BBScrollAmount】屬性來判斷在滾動期間，每次刷新窗口滾動的距離。通過【BBLineH】屬性來判斷什么時候完成一行數據的滾動。通過【rollRestTime】屬性來判斷完成一行數據的滾動后，需要休息多久再進行下一行的滾動。最后還需要【BBLineCount】屬性，用來判斷什么時候對滾動位置進行歸零，實現首尾循環連續滾動的效果。
三.html介紹
html中主要有兩點需要注意的。1：展示的內容，需要在尾部加上幾行首部的內容，因為js需要將最后一行數據滾動到隱藏后，才會進行滾動位置歸零。而如果滾動內容只記載到最后一行數據的話，根據scrollTop的特性，就永遠也隱藏不了最后一行內容了，進而就會不能歸零，滾動停止。2： onmouseover="BBScrollAmount=0" onmouseout="BBScrollAmount=1 可以控制當鼠標移動到滾動窗口時，滾動停止的效果。
第二階段
先貼個demo，打個游戲，30號再更。demo下載