JS实现跑马灯无缝滚动

  • 文档创建者:呆呆
  • 编辑次数:17次
  • 最近更新:Kevin-s 于 2020-10-08
  • 1. 概述

    1.1 问题描述

    在进行一些集团新闻内容展示时,可能需要如下图所示的这种动态效果(无缝滚动),我们称之为跑马灯效果,那么要如何通过报表实现这个效果呢?

    222

    区别于 自动滚屏效果,自动滚屏是整个页面进行滚动,跑马灯效果为页面中某个部分进行滚动。

    注:实际应用中,可以作为一块内容,放到整体报表中,另外如果熟悉 HTML,CSS 的,也可以自行修改样式。

    注:如果不想通过写代码的方法,也可以直接使用官方提供的插件 滚动消息控件

    1.2 实现思路

    通过 JS 方式来实现跑马灯的效果.

    2. 示例

    2.1 准备模板

    这里我们准备一个简单的模板,可以内置数据集,或者任意数据表的内容,不影响效果的展示,这里以内置数据集为例:

    image.png

    将准备好的数据绑定的 A1 单元格,并设置为不扩展,如下图:
    image.png

    2.2 添加公式

    在 A2 单元格添加如下公式:"<div id=\"demo\" style=\"height:250px;overflow:hidden;\"> <div id=\"indemo\" style=\"height:200%;\"> <div id=\"demo1\"> <br />"+REPLACE(A1,",","<br /><br />")+"<br /><br /> </div> <div id=\"demo2\"></div> </div> </div>"

    image.png

    注 1:公式是为了将 A1 单元格的内容拼接到 HTML 语句中,主要是这里的 replace 公式,如果数据内容不在 A1 单元格,要根据内容更改,其他前后均不需要改动

    注 2:公式中的 demo,demo1 ,demo2 会在 JavaScript 中引用,请不要改名字,另外添加\是为了和公式里本身的引号区分

    2.3 设置 HTML 显示内容

    将刚刚添加的公式的 A2 单元格,在单元格属性>其他属性,显示内容设置为用 HTML 显示内容,如下图:

    image.png

    2.4 添加 JS 方法

    点击菜单模板>模板 Web 属性>分页预览设置,选择“为该模板单独设置”,添加加载结束事件,JS 为:

    setTimeout(function(){ speed = 50;        
    var tab = document.getElementById("demo");
    var tab1 = document.getElementById("demo1");
    var tab2 = document.getElementById("demo2");
    tab2.innerHTML = tab1.innerHTML;
    tab.scrollTop = tab1.offsetHeight;
    function Marquee(){
        if (tab.scrollTop >= tab1.offsetHeight) {
            tab.scrollTop-=tab2.offsetHeight;
        }else{
            tab.scrollTop+=1;
        }
    }
    var MyMar=setInterval(Marquee,speed);
    },1500);
    setTimeout(function(){        
    document.getElementById("r-1-0").style.height=0;
    },100);

    具体设置如下图:

    image.png

    2.5 预览效果

    点击分页预览,即可实现跑马灯效果。
    222


    3. 决策报表示例

    3.1 准备模板

    1)新增绝对画布块与报表块

    image.png

    2)决策报表中实现跑马灯效果,,报表块内单元格设置方法同普通报表,不再详述,如下图所示:

    image.png

    注 2:公式中的 demo,demo1 ,demo2 会在 JavaScript 中引用,请不要改名字,另外添加\是为了和公式里本身的引号区分。


    3.2 决策报表无定时刷新

    选中报表块,添加初始化后事件,如下图所示:

    image.png

    image.png

    JavaScript 代码如下:

    setTimeout(function() {
    speed = 50;
    var tab = document.getElementById("demo");
    var tab1 = document.getElementById("demo1");
    var tab2 = document.getElementById("demo2");
    tab2.innerHTML = tab1.innerHTML;
    tab.scrollTop = tab1.offsetHeight;
    function Marquee() {
    if (tab.scrollTop >= tab1.offsetHeight) {
    tab.scrollTop -= tab2.offsetHeight;
    } else {
    tab.scrollTop += 1;
    }
    }
    var MyMar = setInterval(Marquee, speed);
    }, 1500);


    3.3 决策报表定时刷新及滚动

    使用决策报表进行大屏展示时,报表块需要定时刷新以及滚动,而使用上述滚动 JavaScript 后,发现报表块第一次刷新后滚动效果没有了,为什么会这样呢?

    原因是经过定时刷新后,跑马灯的定时器消失了。

    这时可通过修改决策报表的报表块的 JS 事件来完成定时刷新和滚动。JavaScript 代码如下:


    var form = this.options.form;
    setInterval(function() {
    form.getWidgetByName('report0').gotoPage(1, "{}", true);//报表块刷新
    $(".loading-ec-indicator").eq(0).remove();//移除刷新加载图片
    $(".text-indicator").remove();//移除正在加载文字
    setTimeout(function() {
    speed = 50;
    var tab = document.getElementById("demo");
    var tab1 = document.getElementById("demo1");
    var tab2 = document.getElementById("demo2");
    tab2.innerHTML = tab1.innerHTML;
    tab.scrollTop = tab1.offsetHeight;
    function Marquee() {
    if (tab.scrollTop >= tab1.offsetHeight) {
    tab.scrollTop -= tab2.offsetHeight;
    } else {
    tab.scrollTop += 1;
    }
    }
    var MyMar = setInterval(Marquee, speed);
    }, 1000);
    }, 5000);

    代码解释:

    form.getWidgetByName('report0').gotoPage(1, "{}", true);  //report0 为报表块的控件名称

    如下图所示:

    image.png

    image.png

    3.4 预览效果

    1)预览效果一

    保存后点击分页预览,可见滚动不刷新效果如下图:

    1.GIF


    保存后点击分页预览,在滚动的同时也可以进行定时刷新,效果如下图:
    2.GIF

    4. 模板下载

    1)滚动不刷新

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\JS实现跑马灯效果一.cpt

    点击下载模板:JS实现跑马灯效果一.cpt


    2)滚动同时刷新

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\JS实现跑马灯效果二.frm

    点击下载模板:JS实现跑马灯效果二.frm


    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!