历史版本8 :JS设置动态背景/边框 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 问题描述编辑

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

2. 解决办法编辑

2.1 表单中设置动态背景

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

1)准备一张空白的背景图片,在控件列表中选择body组件-样式,选择图片-插入空白背景图片,并设置为适应。

222

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

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

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

js代码如下:

setTimeout(function(){$('.widgetBackground').css('background','url(http://localhost:8075/WebReport/picture/1.gif)');},2000);  
 注意:如果复制的代码后面出现空格请删掉,否则会出现语法错误
2.2 cpt中设置动态背景
1)选择分页预览设置,添加加载结束事件,如下图所示:
222
js代码如下:
setTimeout(function(){ $('.content-container').css('background','url(http://localhost:8075/WebReport/picture/1.gif)'); },100);
注:cpt和表单设置背景所使用的选择器不一样。

3. 效果展现编辑

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