JS实现文字2.5D动态轮播

1.1 预期效果

实现文字 2.5D 动态轮播效果，如下图所示：

1.2 实现思路

报表中引用外部 JS 和 CSS 文件，利用公式函数解析，实现轮播效果。

2.1 添加函数

1）将压缩包 Carousel.rar 中的文件解压后放到设计器安装目录%FR_HOME%\webapps\webroot\WEB-INF\classes\com\fr\function下。

2）设计器菜单栏点击服务器>函数管理器，选择 Carousel.class 文件，添加 Carousel 函数，如下图所示：

2.2 报表设计

1）新建一张普通报表，新建数据集 ds1，数据库查询语句为：SELECT * FROM CUSTOMER 

2）在 A1 单元格中增加公式Carousel(ds1.select("CUSTOMERNAME"))，并右边属性面板点击单元格属性>其他，显示内容选择用HTML显示内容。

2）将下面的所有文件下载后放到设计器安装目录%FR_HOME%\webapps\webroot\help\css下。

funnyNewsTicker.js

funnyNewsTicker.css

3）设计器菜单栏点击服务器>服务器配置，分别引用CSS和引用JavaScript。

引用 CSS：

引用 JavaScript：

4）设计器菜单栏点击模板>模板web属性>数据分析设置，添加加载结束事件。

JS 代码如下：

$("#funnyNewsTicker1").funnyNewsTicker({width:"80%",timer:1000,titlecolor:"#FFF",
itembgcolor:"#1faf6d",infobgcolor:"#1a935c",buttonstyle:"white",bordercolor:"#1a935c"});	
$("#funnyNewsTicker2").funnyNewsTicker({width:"40%",itemheight:250,infobarvisible:false,pagenavi:false,
timer:500,itembgcolor:"#af1f63",bordercolor:"#af1f63",titlecolor:"#FFF"});

2.3 预览效果

保存报表，点击数据分析预览，报表效果如下图所示：

注：不支持移动端。

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\JS实现文字2.5D动态轮播.cpt

点击下载模板：JS实现文字2.5D动态轮播.cpt

目前只支持以英文逗号分隔的数据，后面再增加数组，集合等解析。