JS设置动态背景/边框

目录:

• 1. 描述
• 2. 思路
• 3. 操作步骤：设置动态背景
• 6. 已完成模板

2. 思路

通过js设置动态背景，使用WEBIMAGE()函数设置动态边框。

3. 操作步骤：设置动态背景

3.1 示例一（在决策报表中）

1）准备图片

准备gif动图，将gif动图放在文件夹%FR_HOME%\WebReport\picture下，这里的图片名为1.gif。

注：右击链接存储图片。

2）选择文件->新建决策报表，在控件列表中选择body，添加初始化后事件，如下图所示：

js代码如下：

setTimeout(function() { $('.content-container').css('background', 'url(http://localhost:8075/WebReport/picture/1.gif)'); }, 1000);

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

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

注:如果复制的代码后面出现空格请删掉，否则会出现语法错误

3）保存模板，预览效果如下：

3.2 示例二（在普通报表中）

1）准备图片

准备一张gif动图作为背景，同示例一，将gif动图放在文件夹%JAVA_HOME%\WebReport\picture下，图片命名为1.gif。

注：右击链接存储图片。

2）选择文件->新建普通报表，选择模板->模板web属性，点击分页预览设置，添加加载结束事件，如下图所示：

js代码如下：

setTimeout(function(){ $('.content-container').css('background','url(http://localhost:8075/WebReport/picture/1.gif)'); },1000);

3.3 效果展现

保存模板，点击分页预览，效果如下图所示：

4. 操作步骤：设置动态边框

那么如何制作让动态的边框在决策报表中显示呢（添加动态图）？

4.1 准备图片

将以.gif为后缀的边框动图放在文件夹%JAVA_HOME%\WebReport\picture下。这里将图片命名为2.gif。

注：右击链接存储图片。

4.2 模板设置

1）新建决策报表，设置body的布局方式为绝对布局，缩放逻辑为适应区域，如下：

2）拖进去一个报表块，点击编辑，在单元格中使用webimage公式调用放置的图片，例如：=WEBIMAGE("./picture/2.gif")。这样就给报表块添加了GIF动图。

并设置单元格属性->样式->对齐的【左右缩进】为0。

3）然后叠加在需要边框的组件（这里指模块1和模块2）周边即可，这样就可以显示动态边框了。

4.3 保存预览

保存预览，效果如下图：
5. 预览效果