帆软JS图标实现自动炫酷滚动效果

其实在大项目中，多多少少都会接触到一些分析页面啊，什么报表啊等等，在这里我可以给大家推荐一下FineReport这个软件，对于刚出道的小白来说多少会有点迷茫，在迷茫中一时找不到对的方向。我也是一样。我走过的迷茫道路总结出来一些好的方法告诉大家，让大家以后在需要的时候能快速解决问题，也是我这个小编对朋友们该做的了。今天就给大家说一下在FineReport报表块中用JS实现跑马灯效果：

https://www.finereport.com/ FineReport官网地址

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);