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