1. 描述
一般设计器里面的插入图片只能够插入png或jpg的静态图片，如果需要插入gif动图的话，在设计器里面很难完成。那么该如何添加动态图呢？
2. 思路
通过js设置动态背景，使用WEBIMAGE()函数设置动态边框。
3. 操作步骤：设置动态背景
3.1 示例一（在决策报表中）
1）准备图片
准备gif动图，将gif动图放在文件夹%FR_HOME%\webapps\webroot\help\picture下，这里的图片名为1.gif。
注：右击链接存储图片。
2）选择文件->新建决策报表，在控件列表中选择body，添加初始化后事件，如下图所示：
js代码如下：
setTimeout(function() {
$('.content-container').css('background', 'url(http://localhost:8075/webroot/help/picture/1.gif)');
}, 1000);注：图片需放在服务器上，url中的地址要填写图片的实际地址。
注：如果动态背景图分辨率大小比屏幕的分辨率大小要小，那么动态背景图会平铺。
注:如果复制的代码后面出现空格请删掉，否则会出现语法错误
3）保存模板，预览效果如下：
3.2 示例二（在普通报表中）
1）准备图片
准备一张gif动图作为背景，同示例一，将gif动图放在文件夹%FR_HOME%\webapps\webroot\help\picture下，图片命名为1.gif。
注：右击链接存储图片。
2）选择文件->新建普通报表，选择模板->模板web属性，点击分页预览设置，添加加载结束事件，如下图所示：
js代码如下：
setTimeout(function() {
$('.content-container').css('background', 'url(http://localhost:8075/webroot/help/picture/1.gif)');
}, 1000);3.3 效果展现
保存模板，点击分页预览，效果如下图所示：
4. 操作步骤：设置动态边框
那么如何制作让动态的边框在决策报表中显示呢（添加动态图）？
4.1 模板设置
1）新建决策报表，设置body的布局方式为绝对布局，缩放逻辑为适应区域，如下：
2）拖进去一个报表块，点击编辑，在单元格中使用webimage公式调用放置的图片，例如：=webimage("http://www.finereporthelp.com:8021/download/demo/9.0demo/doc/JS/表单JS实例/2.gif")。这样就给报表块添加了GIF动图。
并设置单元格左右缩进为0，如下图所示：
3）然后叠加在需要边框的组件（这里指模块1和模块2）周边即可，这样就可以显示动态边框了。
4.3 保存预览
保存预览，效果如下图：
5. 预览效果
5.1 PC端预览效果
1）设置动态背景
示例一（在决策报表中）：
示例二（在普通报表中）：
2）设置动态边框
5.2 移动端预览效果
注：不支持移动端。
6. 已完成模板
1）示例一：在决策报表中设置动态背景
模板效果在线查看请点击：JS设置动态背景或边框-示例一.frm
已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\17-JS设置动态背景或边框-示例一.frm
右击存储模板
2）示例二：在普通报表中设置动态背景
模板效果在线查看请点击：JS设置动态背景或边框-示例二.cpt
已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\17-JS设置动态背景或边框-示例二.cpt
点击下载模板
3）示例三：设置动态边框
模板效果在线查看请点击：JS设置动态背景或边框-示例三.frm
已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\17-JS设置动态背景或边框-示例三.frm
右击存储模板
如果解决了您的问题，请及时采纳，系统会为您增加20信用分哦,...
另外小弟混口饭吃不容易，就指望你这个采纳呢...
1min目标场景问卷
立即参与
