js实现滚动播报功能

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中清理延时器

相关推荐
你的人类朋友30 分钟前
浅谈Object.prototype.hasOwnProperty.call(a, b)
javascript·后端·node.js
Mintopia36 分钟前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
打瞌睡de喵38 分钟前
JavaScript 空对象检测
javascript
前端太佬40 分钟前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js
Mintopia41 分钟前
Node.js 中 http.createServer API 详解
前端·javascript·node.js
艾克马斯奎普特1 小时前
Vue.js 3 渐进式实现之响应式系统——第三节:建立副作用函数与被操作字段之间的联系
javascript·vue.js
xRainco1 小时前
Redux从简单到进阶(Redux、React-redux、Redux-toolkit)
前端
印第安老斑鸠啊1 小时前
由一次CI流水线失败引发的对各类构建工具的思考
前端
CodePencil1 小时前
CSS专题之外边距重叠
前端·css
hepherd1 小时前
Flask学习笔记 - 表单
前端·flask