以html实现跑马灯特效
1. 问题描述
在一些大型的展示屏上,目前静态的图文展示已满足不了市场需求,有时候可能需要实现一些动态图文展示效果即跑马灯效果,那么要如何通过帆软报表来实现呢?
如图1:
如图2:
注:如果不想通过写代码的方法,也可以直接使用官方提供的插件滚动消息控件
2. 解决方法
可以通过单元格的纯Html展示效果来实现。
3. 示例(一)
我们以实例来介绍这个特效的实现方法。
这里我们准备一个模板,新建一个内置数据集Embedded1:
将数据集中的信息字段拖至D4单元格,并设置扩展方向为不扩展。

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

3.2.1 B4单元格公式如下(文本: 从下往上,水平靠左滚动):
注:公式是为了将D4单元格的内容拼接到html语句中。
REPLACE(D4, ",", "<br/><br/>")意思是将D4单元格内容中的‘,’替换成‘<br /><br />’ ,‘<br /><br />’在html中就解释为‘换行’
如果数据内容不在D4单元格,要根据内容更改。
3.2.2 B4单元格公式如下(文本: 从下往上,水平居中 滚动):
只需要将上面的代码替换:
| 参数 | 含义 |
|---|---|
| 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显示内容,如下图:
选中C4、D4单元格,右击选择其他,不勾选自动调整行高:

如图:
已完成的报表,可参见%FR_HOME%\WebReport\WEB-INF\reportlets\demo\form\以html实现纵向跑马灯特效.cpt。
4. 示例(二)

将数据列拖至A1单元格,并设置为不扩展,右击A列将其隐藏,模板样式如下:
在B2单元格输入公式,内容如下:
注:含义是将A1单元格的内容拼接到html语句中,便于解析。
| 参数 | 含义 |
|---|---|
| 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; 指文本水平居中 display:table-cell; 指文本垂直居中 vertical-align:middle; 指让标签元素以表格单元格的形式呈现 |

如图:(文本 从右往左,垂直居中滚动)
已完成的报表,可参见%FR_HOME%\WebReport\WEB-INF\reportlets\demo\form\以html实现横向跑马灯特效.cpt。
附件列表
文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201)

