JS实现报表块的跑马灯效果
case one: 表格或图表未冻结首行
创建好表单、图表之后,点击报表快,选择事件——初始化后——编辑
添加JS代码
setTimeout(function() {
$("div[widgetname=B]").find(".reportContent")[0].style.overflow = "hidden";
}, 1000);
//隐藏控件名为B的滚动条
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=B]").find(".reportContent")[0].scrollTop;
if(currentpos == old) {
$("div[widgetname=B]").find(".reportContent")[0].scrollTop = 0;
} else {
old = currentpos;
$("div[widgetname=B]").find(".reportContent")[0].scrollTop = currentpos + 1.5;
}
}
}, 25);
}, 1000)
需要将代码中的B与你的空间名称一致,我的当前图表控件名称为B,如果多个表格需要实现跑马灯,只需要把代码中的B替换为相应控件的名称即可注意:代码中的控件名称需要**大写**
case two:表格需要冻结首行
如果表格需要冻结首行,这样滚动时标题行不会被滚动掉
点击下图的冻结按钮
点击事件,注意此时你的表格控件名为C,所以下面的代码中也为C,可根据控件名看情况修改
setTimeout(function() {
//隐藏报表块report0_c的滚动条(此报表块名为C,根据具体情况修改)
$("div[widgetname=C]").find(".frozen-north")[0].style.overflow = "hidden";
$("div[widgetname=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=C]").find(".frozen-center")[0].scrollTop;
if(currentpos == old) {
$("div[widgetname=C]").find(".frozen-center")[0].scrollTop = 0;
} else {
old = currentpos;
//以25ms的速度每次滚动1.5PX
$("div[widgetname=C]").find(".frozen-center")[0].scrollTop = currentpos + 1.5;
}
}
}, 25);
}, 1000);