跑马灯的效果——JS实现首尾相接

决策系统做一个跑马灯,想要做到首尾相接,但是现在是显示完最后一位直接跳到第一位显示

image.png

js代码如下:

function(){

setTimeout(function() {

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

$("div[widgetname=REPORT4]").find(".frozen-north").css({

'overflow-x': 'hidden',

'overflow-y': 'hidden'

});

$("div[widgetname=REPORT4]").find(".frozen-center").css({

'overflow-x': 'hidden',

'overflow-y': 'hidden'

});

}, 1000);

window.flag1 = true;

var self1 = this;

//鼠标悬停,滚动停止

setTimeout(function() {

$("div[widgetname=REPORT4]").find(".frozen-center").mouseover(function() {

window.flag1 = false;

});

//鼠标离开,继续滚动

$("div[widgetname=REPORT4]").find(".frozen-center").mouseleave(function() {

window.flag1 = true;

});

var old = -1;

var interval = setInterval(function() {

if (!self1.isVisible()) {

return;

}

if (window.flag1) {

currentpos1 = $("div[widgetname=REPORT4]").find(".frozen-center")[0].scrollTop;

if (currentpos1 == old && 0 != currentpos1) {

$("div[widgetname=REPORT4]").find(".frozen-center")[0].scrollTop = 0;

} else {

old = currentpos1;

//以25ms的速度每次滚动1.5PX

$("div[widgetname=REPORT4]").find(".frozen-center")[0].scrollTop = currentpos1 + 1.5;

}

}

},

40);

},

1000);

}

希望能在代码中改进,实现需要的跑马灯效果

FineReport 是天空 发布于 2021-8-18 09:17 (编辑于 2021-8-18 10:11)
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共1回答
最佳回答
0
梦想的初衷Lv7初级互助
发布于2021-8-18 09:21

可以参考这个跑马灯无缝滚动https://help.fanruan.com/finereport/doc-view-1746.html?source=4#

  • 1关注人数
  • 754浏览人数
  • 最后回答于:2021-8-18 10:11
    请选择关闭问题的原因
    确定 取消
    返回顶部