JS设置动态背景/边框

编辑
文档创建者:天狮座 (78536 )     浏览次数:3661次     编辑次数:11次     最近更新:jiangsr 于 2018-01-23     

目录:

1.问题描述编辑

一般设计器里面的插入图片只能够插入png或jpg的静态图片,如果需要插入gif动图的话,在设计器里面很难完成。那么该如何添加动态图呢?

2.设置动态背景编辑

2.1 示例一(在决策报表中)

1)准备图片

需要准备两张图,一张空白背景图,一张gif动图,将gif动图放在文件夹%Tomcat_HOME%\WebReport\picture下,这里的图片名为1.gif。

222

2)选择文件->新建决策报表,在控件列表中选择body组件-样式,选择图片-插入空白背景图片,并设置为适应。
222

3)在body组件的事件中添加初始化后事件,如下图所示:

注:图片需放在服务器上,url中的地址要填写图片的实际地址。

注:如果动态背景图分辨率大小比屏幕的分辨率大小要小,那么动态背景图会平铺。

222

js代码如下:

setTimeout(function(){$('.widgetBackground').css('background','url(http://localhost:8075/WebReport/picture/1.gif)');},2000);  
注:如果复制的代码后面出现空格请删掉,否则会出现语法错误
2.2 示例二(在普通报表中)
1)准备图片
准备一张gif动图作为背景,同示例一,将gif动图放在文件夹%Tomcat_HOME%\WebReport\picture下,图片命名为1.gif。
2)选择文件->新建普通报表,选择模板->模板web属性,点击分页预览设置,添加加载结束事件,如下图所示:
222
js代码如下:
setTimeout(function(){ $('.content-container').css('background','url(http://localhost:8075/WebReport/picture/1.gif)'); },100);
注:决策报表和普通报表设置背景所使用的选择器不一样。
2.3 效果展现

保存后,效果如下图所示:
222

3.设置动态边框编辑

那么如何制作让动态的边框在决策报表中显示呢(添加动态图)?
3.1 准备图片
将以.gif为后缀的边框动图放在文件夹%Tomcat_HOME%\WebReport\picture下。
3.2 模板设置
新建决策报表,设置body为绝对布局,如下:
222
拖进去一个报表块,点击编辑,在单元格中使用webimage公式调用放置的图片,例如:=WEBIMAGE("./picture/4.gif")。这样就给报表块添加了GIF动图。
222
然后叠加在需要边框的组件(这里指模块1和模块2)周边即可,这样就可以显示动态边框了。
222
3.3 保存预览
保存预览,效果如下图:
222










附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

本文档是否有用?
谢谢! 我们非常感谢您的反馈。
提交反馈: