以html实现跑马灯特效!

和而共谐,助而互进。
本帖最后由 zsh331 于 2017-2-21 08:26 编辑

      在一些大型的展示屏上,目前静态的图文展示已满足不了市场需求,有时候可能需要实现一些动态图文展示效果既跑马灯效果,那么要如何通过帆软报表来实现呢?可以通过单元格的纯Html展示效果来实现。下面以实例来介绍这个特效的实现方法!
示例数据
这里我们准备一个模板,这里以文本数据集为例:

将数据绑定的A1单元格,并设置为不扩展,如下图:

输入公式
在B1单元格输入以下公式:
  1. "<marquee id='affiche' align='left' behavior='scroll' bgcolor='#FF0000' direction='up' height='300' width='200' hspace='50' vspace='20' loop='-1' scrollamount='10' scrolldelay='100' onMouseOut='this.start()' onMouseOver='this.stop()'>" + REPLACE(A1, ",", "<br /><br />") + "</marquee>"
复制代码

注:
  1. 公式是为了将A1单元格的内容拼接到html语句中。REPLACE(A1, ",", "<br /><br />")意思是将A1单元格内容中的‘,’替换成‘<br /><br />’ ,‘<br /><br />’在html中就解释为‘换行’,如果数据内容不在A1单元格,要根据内容更改。
复制代码

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



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

效果展示
点击分页预览,即可实现跑马灯特效。








参与人数 +1 F豆 +1 理由
windy_gui + 1

查看全部评分

发表于 2017-2-19 15:30:20
6666{:8_209:}
发表于 2017-2-19 17:53:18
额,这个你不是写到帮助文档里了么?
发表于 2017-2-21 08:28:18
发表于 2017-3-21 14:37:30
应该多发一些这种特效帮助帖
发表于 2017-5-18 09:19:02
非常好的文档,赞一个
发表于 2017-5-18 09:28:47
发表于 2017-9-15 10:09:15
赞一个
发表于 2017-9-19 14:33:53
非常棒,学到东西了
发表于 2018-1-30 10:13:22
好東西,赞一个!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

9回帖数 4关注人数 36553浏览人数
最后回复于:2018-1-30 10:13

返回顶部 返回列表