js实现滚动播报功能

Sunny_lm2024-08-26 15:55

js简单实现滚动播报功能，可根据具体项目进行修改

html 复制代码

   <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>

javascript 复制代码

<script type="text/javascript">
        var oMarquee; //播报的容器
        var BBLineH = 26; //单行高度，像素
        var BBScrollAmount = 1; //每次滚动高度，像素
        var BBLineCount =5; //当前这批数据 实际行数 
        var rollRestTime = 2500; //一条新播报滚动完成后，距离下一次滚动的间隔时间 单位ms
        var 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中清理延时器