帆软教程:js实现图表自动滚动(跑马灯)

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);
  • 3
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值