反饋已提交
網絡繁忙
在一些大型的展示屏上,目前静态的图文展示已满足不了市场需求,有时候可能需要实现一些动态图文展示效果即跑马灯效果,那么要如何通过帆软报表来实现呢?
如图1所示:
如图2所示:
注:如果不想通过写代码的方法,也可以直接使用官方提供的插件滚动消息控件
可以通过单元格的纯 HTML 展示效果来实现。
我们以实例来介绍这个特效的实现方法。
这里我们准备一个模板,新建一个内置数据集 Embedded1:
将数据集中的信息字段拖至 D4 单元格,并设置扩展方向为不扩展。
右击 D 列将其隐藏,模板样式如下:
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 公式参数解释
将 B4 单元格,在单元格属性>其他属性,显示内容设置为用 HTML 显示内容,如下图:
选中 C4、D4 单元格,右击选择其他,选择不自动调整:
如图:
将数据列拖至 A1 单元格,并设置为 扩展,右击 A 列将其隐藏,模板样式如下:
在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; (文本垂直居中)
将 B2 单元格,在单元格属性>其他属性,显示内容设置为用 HTML 显示内容。
如图:(文本 从右往左,垂直居中滚动)
1)示例一
已完成的报表,可参见%FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html实现纵向跑马灯特效.cpt。
2)示例二
已完成的报表,可参见%FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html实现横向跑马灯特效.cpt。
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉