反饋已提交
網絡繁忙
在一些大型的展示屏上,目前静态的图文展示已满足不了市场需求,有时候可能需要实现一些动态图文展示效果,例如跑马灯滚屏效果,那么要如何通过帆软报表来实现呢?预期效果如下:
1)竖屏滚动:
2)横屏滚动:
3)不规则横屏滚动:
注:在决策报表中,也可以直接使用官方提供的插件:滚动消息控件
可以通过单元格的纯 HTML 展示效果来实现。
若想实现首位相接的滚屏效果可参考:JS实现首尾相接的跑马灯
新建普通报表,新建一个内置数据集 Embedded1,只添加一个字段,自定义一些文本数据,如下图所示:
将数据集中的信息字段拖至 D4 单元格,并设置扩展方向为不扩展。设计表格样式如下图所示:
右击 D 列将其隐藏。
选中 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 中表示「换行」。
只需要将上面的公式修改为:
"<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>"
onmouseover=this.stop()
表示添加样式
text-align:center; 指文本水平居中display:table-cell; 指文本垂直居中vertical-align:middle; 指让标签元素以表格单元格的形式呈现
选中 B4 单元格,将「单元格属性>其他」显示内容设置为「用 HTML 显示内容」,如下图所示:
选中 C4、D4 单元格,右击选择其他,选择「不自动调整」.
保存报表,点击「分页预览」,效果与 1.1 节竖屏滚动效果一致。
App 端和 HTML5 端均支持滚动效果,但不支持通过鼠标移动使其暂停并继续滚动的效果,如下图所示:
将数据列拖至 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>"
注:公式参数解释请参考 2.3.3 节。
选中 B2 单元格,设置「单元格属性>其他」,选择「基本」下「不自动调整」,显示内容设置为「用 HTML 显示内容」,如下图所示:
保存报表,点击「分页预览」,可以看到文本从右往左,垂直居中滚动,效果与 1.1 节横屏滚动效果一致。
将数据列拖入 A3 单元格,并设置其扩展方向为「纵向扩展」,表格样式如下图所示:
最后将 A 列隐藏。
在 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>"
其中scrollamount='"+(rand()*(11-1)+1)+"' 表示生成一个位于 11 和 1 之间的随机数,作为运动速度的值。
选中 B3 单元格,设置「单元格属性>其他」,选择「基本」下「不自动调整」,显示内容设置为「用 HTML 显示内容」,如下图所示:
保存报表,点击「分页预览」,效果与 1.1 节不规则横屏滚动效果一致。
已完成模板可参见:
%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
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉