反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

以HTML实现消息滚动

  • 文档创建者:zsh331
  • 历史版本:23
  • 最近更新:Alicehyy 于 2021-09-03
  • 1. 概述

    1.1 预期效果

    在一些大型的展示屏上,目前静态的图文展示已满足不了市场需求,有时候可能需要实现一些动态图文展示效果,例如跑马灯滚屏效果,那么要如何通过帆软报表来实现呢?预期效果如下:

    1)竖屏滚动:

    222

    2)横屏滚动:
    222

    3)不规则横屏滚动:

    3D8DA066B62EAA10279C06E28DE7C4EC.gif

    注:在决策报表中,也可以直接使用官方提供的插件滚动消息控件

    1.2 实现思路

    可以通过单元格的纯 HTML 展示效果来实现。

    2. 示例:竖屏滚动

    2.1 准备数据

    新建普通报表,新建一个内置数据集 Embedded1,只添加一个字段,自定义一些文本数据,如下图所示:

    222

    2.2 设计报表

    将数据集中的信息字段拖至 D4 单元格,并设置扩展方向为不扩展。设计表格样式如下图所示:

    image.png

    右击 D 列将其隐藏。

    image.png

    2.3 单元格插入公式

    2.3.1 从上往下,水平靠左滚动

    选中 B4 单元格,单击鼠标右键选择「单元格元素>插入公式」,公式如下:

    "<marquee id='affiche' align='left' behavior='scroll' bgcolor='#ffffff' direction='up' height='250' 
    width='400' hspace='0' vspace='2' loop='-1' scrollamount='10' scrolldelay='100' onMouseOut='this.start()' 
    onMouseOver='this.stop()'>" + REPLACE(D4, ",", "<br /><br />") + "</marquee>"

    注:公式是为了将 D4 单元格的内容拼接到 HTML 语句中。REPLACE(D4, ",", "<br/><br/>") 意思是将 D4 单元格内容中的 "," 替换成"<br/><br/>",<br /><br />在 HTML 中表示「换行」。

    2.3.2 从下往上,水平居中滚动

    只需要将上面的公式修改为:

    "<marquee id='affiche' style='text-align:center;' behavior='scroll' behavior='scroll' bgcolor='#ffffff' 
    direction='up' height='250' width='400' hspace='0' vspace='2' loop='-1' scrollamount='10' scrolldelay='100' 
    onMouseOut='this.start()' onMouseOver='this.stop()'>" + REPLACE(D4, ",", "<br /><br />") + "</marquee>"

    2.3.3 公式参数解释

     参数 
    含义  
    direction表示滚动的方向,值可以是 left,right,up,down 默认为 left  
    behavior表示滚动的方式,值可以是 scroll(连续滚动)slide(滑动一次)alternate(来回滚动)
    loop表示循环的次数,值是正整数,loop='-1' 表示为无限循环
    scrollamount表示运动速度,值是正整数,默认为 6
    scrolldelay表示停顿时间,值是正整数,默认为 0,单位是毫秒
    align表示元素的垂直对齐方式,值可以是 top,middle,bottom默认为 middle
    bgcolor表示运动区域的背景色,值是 16 进制的 RGB 颜色,默认为白色
    height表示运动区域的高度,值是正整数(单位是像素)或百分数
    width表示运动区域的宽度,值是正整数(单位是像素)或百分数
    hspace表示元素到区域边界的水平距离,值是正整数,单位是像素
    vspace表示元素到区域边界的垂直距离,值是正整数,单位是像素

    onmouseover=this.stop()

    表示当鼠标以上区域的时候滚动停止
    onmouseout=this.start()表示当鼠标移开的时候又继续滚动
    style

    表示添加样式

    text-align:center; 指文本水平居中
    display:table-cell; 指文本垂直居中
    vertical-align:middle; 指让标签元素以表格单元格的形式呈现

    2.4 设置单元格属性

    2.4.1 用 HTML 显示单元格内容

    选中 B4 单元格,将「单元格属性>其他」显示内容设置为「用 HTML 显示内容」,如下图所示:

    image.png

    2.4.2 取消单元格自动调整行高

    选中 C4、D4 单元格,右击选择其他选择「不自动调整」.

    image.png

    2.5 效果预览

    2.5.1 PC 端

    保存报表,点击「分页预览」,效果与 1.1 节竖屏滚动效果一致。

    2.5.2 移动端

    App 端和 HTML5 端均支持滚动效果,但不支持通过鼠标移动使其暂停并继续滚动的效果,如下图所示:

    481195EA-FB9D-4CA9-AD55-6B344D0AF7E8.GIF

    3. 示例:横屏滚动

    3.1 准备数据

    新建普通报表,新建一个内置数据集 Embedded1,只添加一个字段,自定义一些文本数据,如下图所示:

    3.2 设计报表

    将数据列拖至 A1 单元格,并设置扩展方向为「不扩展」,右击 A 列将其隐藏,表格样式如下图所示:
    image.png

    3.3 单元格插入公式

    在 B2 单元格插入公式:

    "<marquee id='affiche' style='text-align:center;display:table-cell;vertical-align:middle;' behavior='scroll' 
    bgcolor='#ffffff' direction='left' height='100%' width='500%' hspace='0' vspace='2' loop='-1' scrollamount='10'  
    scrolldelay='100' onMouseOut='this.start()' onMouseOver='this.stop()'>" + REPLACE(A1, ",", " ") + "</marquee>"

    注:公式参数解释请参考 2.3.3 节。

    3.4 设置单元格属性

    选中 B2 单元格,设置「单元格属性>其他」,选择「基本」下「不自动调整」,显示内容设置为「用 HTML 显示内容」,如下图所示:

    1575256889840203.png

    3.5 效果预览

    3.5.1 PC 端

    保存报表,点击「分页预览」,可以看到文本从右往左,垂直居中滚动,效果与 1.1 节横屏滚动效果一致。

    3.5.2 移动端

    App 端和 HTML5 端均支持滚动效果,但不支持通过鼠标移动使其暂停并继续滚动的效果,如下图所示:

    6E729F02-7A4E-4623-A088-2834F990DF08.GIF

    4. 示例:不规则横屏滚动

    4.1 准备数据

    新建普通报表,新建一个内置数据集 Embedded1,只添加一个字段,自定义一些文本数据,如下图所示:

    222

    4.2 设计报表

    将数据列拖入 A3 单元格,并设置其扩展方向为「纵向扩展」,表格样式如下图所示:

    1615967657195296.png

    最后将 A 列隐藏。

    4.3 单元格插入公式

    在 B3 单元格插入公式:

    "<marquee id='affiche' align='left' behavior='scroll' bgcolor='#ffffff' direction='left' height='250' width='400' 
    hspace='0' vspace='2' loop='-1' scrollamount='"+(rand()*(11-1)+1)+"' scrolldelay='100' onMouseOut='this.start()' 
    onMouseOver='this.stop()'>" + REPLACE(A3, ",", "<br />") + "</marquee>"

    注:公式参数解释请参考 2.3.3 节。

    其中scrollamount='"+(rand()*(11-1)+1)+"'  表示生成一个位于 11 和 1 之间的随机数,作为运动速度的值。

    4.4 设置单元格属性

    选中 B3 单元格,设置「单元格属性>其他」,选择「基本」下「不自动调整」,显示内容设置为「用 HTML 显示内容」,如下图所示:

    1575256889840203.png

    4.5 效果预览

    4.5.1 PC 端

    保存报表,点击「分页预览」,效果与 1.1 节不规则横屏滚动效果一致。

    4.5.2 移动端

    App 端和 HTML5 端均支持滚动效果,但不支持通过鼠标移动使其暂停并继续滚动的效果,如下图所示:

    BB5DB0FB-309A-4F19-B0D7-A04AD78AFC81.GIF

    5. 模板下载

    已完成模板可参见:

    %FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html实现纵向跑马灯特效.cpt

    %FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html实现横向跑马灯特效.cpt

    %FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html实现不规则横向跑马灯特效.cpt

    点击下载模板:

    以html实现纵向跑马灯特效.cpt

    以html实现横向跑马灯特效.cpt

    以html实现不规则横向跑马灯特效.cpt

    附件列表


    主题: 报表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526