1.1 问题描述

在设计大屏报表块时，希望实现文字跑马灯效果。

通常大家可以「HTML+JS」的方式实现单行文本的跑马灯效果，方案如下：

1）以 HTML 实现跑马灯特效

2）JS 实现跑马灯效果

那么如何实现整体报表块的跑马灯效果呢？如下图所示：

1.2 解决思路

在报表块初始化后，通过 JS 实现隐藏滚动条和跑马灯的效果。

1）多个报表块同时实现跑马灯效果时，每个报表块可独立暂停。

2）存在冻结行时，报表块的跑马灯效果不受影响。

3）安装自定义滚动条时，报表块的跑马灯效果不受影响。

2.1 新建模板

2.1.1 新建数据集

新建决策报表，新建数据集 ds1 ，SQL 语句为：SELECT * FROM 销量

如下图所示：

2.1.2 设计报表样式

新建报表块 report0，报表块样式如下图所示：

2.1.3 冻结标题行

选中报表块 report0，点击编辑，冻结第 1 行，如下图所示：

2.2 添加初始化事件

选中报表块 report0，添加初始化事件，如下图所示：

JavaScript 代码如下：

setTimeout(function() {
    var $report = $("div[widgetname=REPORT0]");
    //获取对应report的div元素
    var $scroll = $report.find("#frozen-center");
    //获取对应report的div元素的滚动块元素,冻结为#frozen-center，未冻结且未安装自定义滚动条插件为.reportContent，未冻结且安装了自定义滚动条插件为.scrollDiv
    var flag = window.flag0;
    //设置全局变量flag,每个报表块需保证各不相同
    $report.find("#frozen-center").css('overflow-x', 'hidden');
    $report.find("#frozen-center").css('overflow-y', 'hidden');
    $report.find("#frozen-north").css('overflow-x', 'hidden');
    $report.find("#frozen-north").css('overflow-y', 'hidden');
    //冻结情况下隐藏滚动条
    $report.find(".reportContent").css('overflow-y', 'hidden');
    $report.find(".reportContent").css('overflow-x', 'hidden');
    //非冻结情况下隐藏滚动条
    flag = true;
    //定义全局参数flag，用来控制滚动的暂停和继续
    $scroll.mouseover(function() {
        flag = false;
    })
    //鼠标悬浮，滚动停止
    $scroll.mouseleave(function() {
        flag = true;
    })
    //鼠标离开，继续滚动
    var old = -1;
    setInterval(function() {
        if (flag) {
            currentpos = $scroll[0].scrollTop;
            //获取距顶部距离
            if (currentpos == old) {
                $scroll[0].scrollTop = 0;
                //若已到达底部，则重置
            } else {
                old = currentpos;
                $scroll[0].scrollTop = currentpos + 1.5;
                //若未到达底部，则向下移动1.5像素
            }
        }
    }, 25);
    //以25ms的频率执行
}, 500);

用户需要自行修改以下几处：

注：如果报表块加载比较慢没有实现效果，可以适当调整延时函数 setTimeout 的延时时间。

2.3 效果预览

保存模板，点击预览，报表块 report0 实现跑马灯效果，效果如1.1 问题描述所示。

注：1.不支持移动端   2.不支持报表块定时刷新场景。

已完成的模板请参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果.frm

点击下载模板：03-报表块实现跑马灯效果.frm