html实现滚动播报（原生JS实现）
废话不多说，先看一个简单的滚动效果（鼠标放上去的时候可以暂停滚动，谷歌版本 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下载
