历史版本5 :JS实现决策报表中滚屏/跑马灯效果 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1.问题描述编辑
在设计大屏报表块的时候,有时我们希望实现文字跑马灯效果。现有的文档当中:
都是以HTML+js的方式实现了单行文本的跑马灯效果,那么如何实现整体报表块的跑马灯效果呢,如下:
2.实现思路编辑
报表布局设置加上js控制实现。
3.实现步骤编辑
1)将body的布局方式设置为绝对布局(自适应布局无效)
2)设置报表块重复标题行
在8.0版本中还要设置冻结行:
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)适当的美化一下边框、背景色等,保存预览。
4.备注编辑
注:移动端不支持
如果是多个报表块同时实现跑马灯,则需将$("#frozen-center")替换为$(".frozen-center"),如报表块1(report1)的修改代码如下:
setTimeout(function(){
//隐藏报表块report1的滚动条(此报表块名为report1,根据具体情况修改)
$("div[widgetname=REPORT1]").find(".frozen-north")[0].style.overflow="hidden";
$("div[widgetname=REPORT1]").find(".frozen-center")[0].style.overflow="hidden";
},100);
//如果鼠标悬停不希望所有的报表块一起停,则所有的flag变量也要改,如改为flag1
window.flag1=true;
//鼠标悬停,滚动停止
setTimeout(function(){
$(".frozen-center").mouseover(function()
{
window.flag1=false;
});
//鼠标离开,继续滚动
$(".frozen-center").mouseleave(function()
{
window.flag1=true;
});
var old=-1;
var interval=setInterval(function()
{
if(window.flag1){
currentpos=$(".frozen-center")[1].scrollTop;
if (currentpos==old){
$(".frozen-center")[1].scrollTop=0;
}
else {
old=currentpos;
//以25ms的速度每次滚动1.5PX
$(".frozen-center")[1].scrollTop=currentpos+1.5;
}
}
},25);
},1000);
如未设置冻结标题行,则将$("#frozen-center")替换为$(".reportContent"),安装了自定义滚动条插件(1.2版本)情况下可以将$("#frozen-center")替换成$(".scrollDiv")。
js代码如下:
if(window.interval2){clearInterval(window.interval2);}
setTimeout(function(){
//$("div[widgetname=REPORT0]").find("#frozen-north")[0].style.overflow="hidden";
$("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)