2.1 问题描述

在设计大屏报表块的时候，有时我们希望实现文字跑马灯效果。现有的文档当中：

1）以html实现跑马灯特效

2）JS实现跑马灯效果

都是以「HTML+JS」的方式实现了单行文本的跑马灯效果，那么如何实现整体报表块的跑马灯效果呢？如下图所示：

2.2 解决思路

报表布局设置加上 JS 控制实现。

注：示例是在报表块初始化后通过 JS 实现了隐藏滚动条和跑马灯的效果，如果报表块加载比较慢没有实现效果，可以适当调整延时函数 setTimeout 的延时时间。

3.1 实现背景

1）该方案不得安装自定义滚动条插件 ，如需使用请查看示例二

2）该方案不得冻结标题行，如需冻结请查看示例三

3）该方案 body 布局方式必须为绝对布局，自适应布局下不生效

4）该方案可实现：单个报表块跑马灯，多个报表块同时跑马灯

3.2 实现步骤

1）打开模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果-素材.frm

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

以 report0 为例：

2）添加初始化事件

JS 代码如下：

注：用户使用时需要把代码中所有的REPORT0，修改为报表块对应的控件名称的大写格式

setTimeout(function() {
    $("div[widgetname=REPORT0]").find("#frozen-center").css('overflow-x', 'hidden');
    $("div[widgetname=REPORT0]").find("#frozen-center").css('overflow-y', 'hidden');
    $("div[widgetname=REPORT0]").find("#frozen-north").css('overflow-x', 'hidden');
    $("div[widgetname=REPORT0]").find("#frozen-north").css('overflow-y', 'hidden');
    $("div[widgetname=REPORT0]").find(".reportContent").css('overflow-y', 'hidden');
    $("div[widgetname=REPORT0]").find(".reportContent").css('overflow-x', 'hidden');
}, 100);

window.flag = true;
setTimeout(function() {
    $(".reportContent").mouseover(function() {
        window.flag = false;
    })
    $(".reportContent").mouseleave(function() {
        window.flag = true;
    })
    var old = -1;
    window.interval2 = setInterval(function() {
        if (window.flag) {
            currentpos = $("div[widgetname=REPORT0]").find(".reportContent")[0].scrollTop;
            if (currentpos == old) {
                $("div[widgetname=REPORT0]").find(".reportContent")[0].scrollTop = 0;
            } else {
                old = currentpos;
                $("div[widgetname=REPORT0]").find(".reportContent")[0].scrollTop = currentpos + 1.5;
            }
        }
    }, 25);
}, 1000)

3.3 保存预览

注：不支持移动端。

4.1 实现背景

1）该方案在安装自定义滚动条插件的前提下进行

2）该方案不得冻结标题行，如需冻结请查看示例三

3）该方案 body 布局方式必须为绝对布局，自适应布局下不生效

4）该方案可实现：单个报表块跑马灯，多个报表块同时跑马灯

4.2 实现步骤

1）安装 自定义滚动条插件

2）打开模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果-素材.frm

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

以 report1 为例：

3）添加初始化事件

JS 代码如下：

注：用户使用时需要把代码中所有的REPORT1，修改为报表块对应的控件名称的大写格式

setTimeout(function() {
    $("div[widgetname=REPORT1]").find(".scrollDiv").css('overflow-x', 'hidden');
    $("div[widgetname=REPORT1]").find(".scrollDiv").css('overflow-y', 'hidden');
}, 100);

window.flag = true;
setTimeout(function() {
    $(".scrollDiv").mouseover(function() {
        window.flag = false;
    })
    $(".scrollDiv").mouseleave(function() {
        window.flag = true;
    })
    var old = -1;
    window.interval2 = setInterval(function() {
        if (window.flag) {
            currentpos = $("div[widgetname=REPORT1]").find(".scrollDiv")[0].scrollTop;
            if (currentpos == old) {
                $("div[widgetname=REPORT1]").find(".scrollDiv")[0].scrollTop = 0;
            } else {
                old = currentpos;
                $("div[widgetname=REPORT1]").find(".scrollDiv")[0].scrollTop = currentpos + 1.5;
            }
        }
    }, 25);
}, 1000)

4.3 保存预览

注：不支持移动端。

5.1 实现背景

1）该方案适用于标题行冻结的报表块

2）该方案 body 布局方式必须为绝对布局，自适应布局下不生效

3）该方案可实现：单个报表块跑马灯，多个报表块同时跑马灯

5.2 实现步骤

1）打开模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果-素材.frm

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

以 report2 为例：

2）添加初始化事件

JS 代码如下：

注：用户使用时需要把代码中所有的REPORT2，修改为报表块对应的控件名称的大写格式

setTimeout(function() {
$("div[widgetname=REPORT2]").find("#frozen-center").css('overflow-x', 'hidden'); 
$("div[widgetname=REPORT2]").find("#frozen-center").css('overflow-y', 'hidden');
$("div[widgetname=REPORT2]").find("#frozen-north").css('overflow-x', 'hidden');
$("div[widgetname=REPORT2]").find("#frozen-north").css('overflow-y', 'hidden');
$("div[widgetname=REPORT2]").find(".reportContent").css('overflow-y', 'hidden');
$("div[widgetname=REPORT2]").find(".reportContent").css('overflow-x', 'hidden');
}, 100);
window.flag = true;
setTimeout(function() {
$("#frozen-center").mouseover(function() {
window.flag = false;
})
//鼠标悬停，滚动停止 
$("#frozen-center").mouseleave(function() {
window.flag = true;
})
//鼠标离开，继续滚动 
var old = -1;
var interval = setInterval(function() {
if (window.flag) {
currentpos = $("div[widgetname=REPORT2]").find("#frozen-center")[0].scrollTop;
if (currentpos == old) {
$("div[widgetname=REPORT2]").find("#frozen-center")[0].scrollTop = 0;
} else {
old = currentpos;
$("div[widgetname=REPORT2]").find("#frozen-center")[0].scrollTop = currentpos + 1.5;
}
}
}, 25);
//以25ms的速度每次滚动3.5PX 
}, 1000)

5.3 保存预览

• 单个报表块跑马灯

注：不支持移动端。

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

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

注：未安装自定义滚动条插件时，report0 和 report2 实现跑马灯效果

       安装了自定义滚动条插件时，report1 和 report2 实现跑马灯效果