历史版本6 :JS实现决策报表中滚屏/跑马灯效果 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 描述编辑
在设计大屏报表块的时候，有时我们希望实现文字跑马灯效果。现有的文档当中：
都是以HTML+js的方式实现了单行文本的跑马灯效果，那么如何实现整体报表块的跑马灯效果呢，如下：
2. 思路编辑
报表布局设置加上js控制实现。
3. 操作步骤编辑
3.1 示例一：标题未冻结的跑马灯效果
1）新建一个决策报表，将body的布局方式设置为绝对布局（自适应布局无效）
2）新建一个数据集ds1：SELECT * FROM 销量。
3）在决策报表主体拖入一个报表块，报表块设计如下：
3）添加报表块初始化后事件：
js代码如下：
if(window.interval2) {
clearInterval(window.interval2);
}
setTimeout(function() {
$("div[widgetname=REPORT0]").find(".reportContent")[0].style.overflow = "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 = $(".reportContent")[0].scrollTop;
if(currentpos == old) {
$(".reportContent")[0].scrollTop = 0;
} else {
old = currentpos;
$(".reportContent")[0].scrollTop = currentpos + 1.5;
}
}
}, 25);
}, 1000)
4）保存预览，效果如下：
备注一：如果有多个报表块需要同时实现跑马灯，将后半部分setInterval()函数中的$(".reportContent")[0]统一修改为$("div[widgetname=REPORT0]").find(".reportContent")[0]，把代码中所有的REPORT0修改为报表块对应的控件名称大写格式：
setTimeout(function() {
$("div[widgetname=REPORT0_C]").find(".reportContent")[0].style.overflow = "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_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：
setTimeout(function() {
$("div[widgetname=REPORT0]").find(".scrollDiv")[0].style.overflow = "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 = $(".scrollDiv")[0].scrollTop;
if(currentpos == old) {
$(".scrollDiv")[0].scrollTop = 0;
} else {
old = currentpos;
$(".scrollDiv")[0].scrollTop = currentpos + 1.5;
}
}
}, 25);
}, 1000)
3.2 示例二：标题冻结的跑马灯效果
在示例一的基础上修改报表。
1）编辑报表块，选中第一行，将鼠标放在行表头上，点击右键，点击设置重复标题行：
2）在报表块的工具栏中，点击冻结，打开重复与冻结设置窗口，勾选冻结第1行至第1行：
3）将报表块初始化后事件的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";
}, 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 = $(".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);
直接替换即可。如下图所示：
4）保存预览，效果如下：
备注一：如果有多个报表块需要同时实现跑马灯，将后半部分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";
}, 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=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);
4. 预览效果
4.1 PC端预览效果
1）示例一：标题未冻结的跑马灯效果
2）示例二：标题冻结的跑马灯效果
4.2 移动端预览效果
注：不支持移动端。