反馈已提交

网络繁忙

JS实现文字动态轮播特效

  • 文档创建者:hubery1027
  • 历史版本:6
  • 最近更新:RosieY 于 2022-08-30
  • 1. 概述

    1.1 预期效果

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

    2020-05-07_17-07-56.gif

    1.2 实现思路

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

    2. 示例

    2.1 添加函数

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

    Snag_24cc19c6.png

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

    image.png

    2.2 报表设计

    1)新建一张普通报表,新建数据集 ds1,数据库查询语句为:SELECT * FROM CUSTOMER 

    Snag_24d00948.png

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

    Snag_24d0f30c.png

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

    funnyNewsTicker.js

    funnyNewsTicker.css

    3)设计器菜单栏点击服务器>服务器配置,分别引用CSS引用JavaScript

    引用 CSS:

    1.png

    引用 JavaScript:

    2.png

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

    Snag_24d49b53.png

    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 预览效果

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

    注:不支持移动端。

    2020-05-07_17-07-56.gif

    附件列表


    主题: 二次开发
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭



    AI

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持