本文主要是介绍js实现滚动播报功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
js简单实现滚动播报功能，可根据具体项目进行修改
<div id="bobaodiv" style="overflow: hidden; height: 26px; 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="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><script type="text/javascript">var oMarquee; //播报的容器var BBLineH = 26; //单行高度，像素var BBScrollAmount = 1; //每次滚动高度，像素var BBLineCount =5; //当前这批数据 实际行数 var rollRestTime = 2500; //一条新播报滚动完成后，距离下一次滚动的间隔时间 单位msvar rollTime = 50; //播报滚动中的刷新时间 单位ms 控制滚动速度/** 启动播报滚动事件*/window.onload= function(){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>注意：vue中使用在mounted调用一次，在destroyed中清理延时器
这篇关于js实现滚动播报功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
