历史版本3 :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)适当的美化一下边框、背景色等,保存预览。
注:移动端不支持