表单中利用js实现跑马灯效果,然后鼠标悬浮使其滚动停止。。可是过一段时间鼠标悬浮滚动无法停止。

js如下

setTimeout(function() {

//隐藏报表块report0的滚动条(此报表块名为report0,根据具体情况修改)

$("div[widgetname=REPORT3]").find(".frozen-north")[0].style.overflow = "hidden";

$("div[widgetname=REPORT3]").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 = $(".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);


FineReport Zandra 发布于 2019-10-15 09:46 (编辑于 2019-10-15 09:58)
1min目标场景问卷 立即参与
回答问题
悬赏:6 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共4回答
最佳回答
1
L大大Lv7高级互助
发布于2020-5-16 13:36

setTimeout(function() {

    var $report = $("div[widgetname=REPORT0]");

    //获取对应report的div元素

    var $scroll = $report.find(".reportContent");

    //获取对应report的div元素的滚动块元素,冻结为#frozen-center,未冻结且未安装自定义滚动条插件为.reportContent,未冻结且安装了自定义滚动条插件为.scrollDiv

    var flag = window.flag0;

    //设置全局变量flag,每个报表块需保证各不相同

    $report.find("#frozen-center").css('overflow-x', 'hidden');

    $report.find("#frozen-center").css('overflow-y', 'hidden');

    $report.find("#frozen-north").css('overflow-x', 'hidden');

    $report.find("#frozen-north").css('overflow-y', 'hidden');

    //冻结情况下隐藏滚动条

    $report.find(".reportContent").css('overflow-y', 'hidden');

    $report.find(".reportContent").css('overflow-x', 'hidden');

    //非冻结情况下隐藏滚动条

    flag = true;

    //定义全局参数flag,用来控制滚动的暂停和继续 (表单flag注意重复)

    $scroll.mouseover(function() {

        flag = false;

    })

    //鼠标悬浮,滚动停止

    $scroll.mouseleave(function() {

        flag = true;

    })

    //鼠标离开,继续滚动

    var old = -1;

    setInterval(function() {

        if (flag) {

            currentpos = $scroll[0].scrollTop;

            //获取距顶部距离

            if (currentpos == old) {

                $scroll[0].scrollTop = 0;

                //若已到达底部,则重置

            } else {

                old = currentpos;

                $scroll[0].scrollTop = currentpos + 1.5;

                //若未到达底部,则向下移动1.5像素

            }

        }

    }, 25);

    //以25ms的频率执行

}, 500);



可使用如上代码,如果有多个需修改对应flag,不能重复

最佳回答
0
shirokoLv6资深互助
发布于2020-5-16 01:02

这个端代码是针对有冻结的报表的。

确认你的报表是否有做冻结

最佳回答
0
yikefuLv6初级互助
发布于2020-5-16 09:26(编辑于 2020-5-16 09:26)

Demo.zip

我做的,应该可以直接用

最佳回答
0
啊哈~鹅卵石Lv5见习互助
发布于2020-5-16 10:06

Demo.zip

我给你改了改JS你试试

  • 5关注人数
  • 768浏览人数
  • 最后回答于:2020-5-16 13:36
    请选择关闭问题的原因
    确定 取消
    返回顶部