历史版本10 :JS设置动态背景/边框 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 问题描述编辑
一般设计器里面的插入图片只能够插入png或jpg的静态图片，如果需要插入gif动图的话，在设计器里面很难完成。那么该如何添加动态图呢？
2. 设置动态背景编辑
2.1 示例一（在决策报表中）
1）准备图片
需要准备两张图，一张空白背景图，一张gif动图，将gif动图放在文件夹%Tomcat_HOME%\WebReport\picture下，这里的图片名为1.gif。
2）选择文件->新建决策报表，在控件列表中选择body组件-样式，选择图片-插入空白背景图片，并设置为适应。
3）在body组件的事件中添加初始化后事件，如下图所示：
注：图片需放在服务器上，url中的地址要填写图片的实际地址。
注：如果动态背景图分辨率大小比屏幕的分辨率大小要小，那么动态背景图会平铺。
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属性，点击分页预览设置，添加加载结束事件，如下图所示：
js代码如下：
setTimeout(function(){
$('.content-container').css('background','url(http://localhost:8075/WebReport/picture/1.gif)');
},100);
2.3 效果展现
保存后，效果如下图所示：
3.设置动态边框编辑
那么如何制作让动态的边框在决策报表中显示呢（添加动态图）？
3.1 准备图片
将以.gif为后缀的边框动图放在文件夹%Tomcat_HOME%\WebReport\picture下。
3.2 模板设置
新建决策报表，设置body为绝对布局，如下：
拖进去一个报表块，点击编辑，在单元格中使用webimage公式调用放置的图片，例如：=WEBIMAGE("./picture/4.gif")。这样就给报表块添加了GIF动图。
然后叠加在需要边框的组件（这里指模块1和模块2）周边即可，这样就可以显示动态边框了。
3.3 保存预览
保存预览，效果如下图：
