历史版本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)