以html实现跑马灯特效

编辑
  • 文档创建者:zsh331
  • 浏览次数:15110次
  • 编辑次数:16次
  • 最近更新:胡透透 于 2019-12-02
  • 1. 描述

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

    如图1所示:

    222

    如图2所示:
    222

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

    2. 思路

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

    3. 示例(一)

    我们以实例来介绍这个特效的实现方法。

    3.1 示例数据

    这里我们准备一个模板,新建一个内置数据集 Embedded1

    222

    3.2 模板样式

    将数据集中的信息字段拖至 D4 单元格,并设置扩展方向为不扩展

    image.png

    右击 D 列将其隐藏,模板样式如下:

    image.png

    3.2.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 中就解释为‘换行’

    如果数据内容不在D4单元格,要根据内容更改。

    3.2.2  B4 单元格公式如下(文本: 从下往上水平居中 滚动):

    只需要将上面的代码替换:

    "<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>"

    3.3 公式参数解释

     参数 
    含义  
      direction 表示滚动的方向,值可以是 left,right,up,down 默认为 left  
      behavior  表示滚动的方式,值可以是 scroll(连续滚动)slide(滑动一次)alternate(来回滚动)
      loop  表示循环的次数,值是正整数,默认为无限循环
      scrollamount  表示运动速度,值是正整数,默认为 6
      scrolldelay  表示停顿时间,值是正整数,默认为 0,单位是毫秒
      align  表示元素的垂直对齐方式,值可以是 top,middle,bottom默认为 middle
      bgcolor  表示运动区域的背景色,值是 16 进制的 RGB 颜色,默认为白色
      height、width  表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height 为标签内元素的高度。
      hspace、vspace  表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素。
    onmouseover=this.stop() onmouseout=this.start()  表示当鼠标以上区域的时候滚动停止,当鼠标移开的时候又继续滚动
     style 添加样式:text-align:center; 指文本水平居中

    3.4 设置以HTML显示单元格内容

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

    image.png


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

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

    image.png

    3.6 点击分页预览

    如图:

    222


    4. 示例(二)

    4.1 准备数据

    222

    4.2 模板制作

    将数据列拖至 A1 单元格,并设置为 扩展,右击 A 列将其隐藏,模板样式如下:
    image.png

    在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>"

    注:含义是将 A1 单元格的内容拼接到 HTML 语句中,便于解析。

    REPLACE(A1, ",", " ")   (将 A1 单元格中的【逗号】替换成【空格】)

    text-align:center;   (文本水平居中)

    display:table-cell;vertical-align:middle;   (文本垂直居中)

    4.3 公式参数解释

     参数 
    含义  
      direction 表示滚动的方向,值可以是 left,right,up,down,定义:left  
      behavior 表示滚动的方式,值可以是 scroll(连续滚动)slide(滑动一次)alternate(来回滚动)
      loop  表示循环的次数,值是正整数,默认为无限循环
      scrollamount  表示运动速度,值是正整数,默认为 6
      scrolldelay  表示停顿时间,值是正整数,默认为 0,单位是毫秒
      align  表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle
      bgcolor  表示运动区域的背景色,值是 16 进制的 RG B颜色,默认为白色
      height、width  表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height 为标签内元素的高度。
      hspace、vspace  表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素。
    onmouseover=this.stop()    onmouseout=this.start()  表示当鼠标以上区域的时候滚动停止,当鼠标移开的时候又继续滚动

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

    4.4 以 HTML 显示单元格内容

    将 B2 单元格,在单元格属性>其他属性,显示内容设置为用 HTML 显示内容。

    如图:

    image.png


    4.5 点击分页预览

    如图:(文本 从右往左垂直居中滚动)

    222

    5. 已完成模板

    1)示例一

    已完成的报表,可参见%FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html实现纵向跑马灯特效.cpt

    2)示例二

    已完成的报表,可参见%FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html实现横向跑马灯特效.cpt


    附件列表


    主题: 报表设计
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]