报表块实现跑马灯效果

1. 描述

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

都是以HTML+js的方式实现了单行文本的跑马灯效果，那么如何实现整体报表块的跑马灯效果呢，如下：
2. 思路

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

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

3.1 示例一：标题未冻结的跑马灯效果

1）新建一个决策报表，将body的布局方式设置为绝对布局（自适应布局无效）

SELECT * FROM 销量。

3）在决策报表主体拖入一个报表块，报表块设计如下：

初始化后事件：

if(window.interval2) {
clearInterval(window.interval2);
}
setTimeout(function() {
$("div[widgetname=REPORT0]").find(".reportContent")[0].style.overflow = "hidden";
}, 1000);
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 = $(".reportContent")[0].scrollTop;
if(currentpos == old) {
$(".reportContent")[0].scrollTop = 0;
} else {
old = currentpos;
$(".reportContent")[0].scrollTop = currentpos + 1.5;
}
}
}, 25);
}, 1000)

4）保存预览，效果如下：

$(".reportContent")[0]统一修改为$("div[widgetname=REPORT0]").find(".reportContent")[0]，把代码中所有的REPORT0修改为报表块对应的控件名称大写格式：

setTimeout(function() {
$("div[widgetname=REPORT0_C]").find(".reportContent")[0].style.overflow = "hidden";
}, 1000);
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_C]").find(".reportContent")[0].scrollTop;
if(currentpos == old) {
$("div[widgetname=REPORT0_C]").find(".reportContent")[0].scrollTop = 0;
} else {
old = currentpos;
$("div[widgetname=REPORT0_C]").find(".reportContent")[0].scrollTop = currentpos + 1.5;
}
}
}, 25);
}, 1000)

保存预览，效果如下：

自定义滚动条插件（1.2版本），需要将js代码中的.reportContent替换成.scrollDiv：

3.2 示例二：标题冻结的跑马灯效果

在示例一的基础上修改报表。

1）编辑报表块，选中第一行，将鼠标放在行表头上，点击右键，点击设置重复标题行：

冻结，打开重复与冻结设置窗口，勾选冻结第1行至第1行：

初始化后事件的js代码修改为下面的代码：

setTimeout(function() {
//隐藏报表块report0的滚动条（此报表块名为report0，根据具体情况修改）
$("div[widgetname=REPORT0]").find(".frozen-north")[0].style.overflow = "hidden";
$("div[widgetname=REPORT0]").find(".frozen-center")[0].style.overflow = "hidden";
}, 1000);
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 = $(".frozen-center")[0].scrollTop;
if(currentpos == old) {
$(".frozen-center")[0].scrollTop = 0;
} else {
old = currentpos;
//以25ms的速度每次滚动1.5PX
$(".frozen-center")[0].scrollTop = currentpos + 1.5;
}
}
}, 25);
}, 1000);

直接替换即可。如下图所示：

setInterval()函数中的$(".frozen-center")[0]统一修改为$("div[widgetname=REPORT0]").find(".frozen-center")[0]，把代码中所有的REPORT0修改为报表块对应的控件名称大写格式：

setTimeout(function() {
//隐藏报表块report0_c的滚动条（此报表块名为report0_c，根据具体情况修改）
$("div[widgetname=REPORT0_C]").find(".frozen-north")[0].style.overflow = "hidden";
$("div[widgetname=REPORT0_C]").find(".frozen-center")[0].style.overflow = "hidden";
}, 1000);
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=REPORT0_C]").find(".frozen-center")[0].scrollTop;
if(currentpos == old) {
$("div[widgetname=REPORT0_C]").find(".frozen-center")[0].scrollTop = 0;
} else {
old = currentpos;
//以25ms的速度每次滚动1.5PX
$("div[widgetname=REPORT0_C]").find(".frozen-center")[0].scrollTop = currentpos + 1.5;
}
}
}, 25);
}, 1000);