CSS 实现转盘特效

  • 文档创建者:Kevin-s
  • 编辑次数:8次
  • 最近更新:Kevin-s 于 2019-11-11
  • 1. 概述

    1.1 预期效果 

    用户有时需要制作一个类似 FineReport 转盘效果的抽奖报表,本文以 FineReport 转盘为例,向用户展示实现转盘的方法。如下图所示:

    111.gif

    1.2 实现思路

    利用前端技术和 FineReport 设计器相结合的方法,实现此效果。

    2. 操作步骤

    2.1 新建模板

    在 FineReport设计器中点击文件>新建普通报表,在新建模板中合并一片单元格,在单元格中输入以下代码:

    <div id="bg">
    <img id="pointer1" src="/webroot/scripts/css/转盘效果/pointer.png" alt="pointer">
    <img id="turntable1" src="/webroot/scripts/css/转盘效果/turntable.png" alt="turntable">
    </div>

    在右侧属性面板单元格属性>其他>显示内容中,选择「用HTML显示内容」。如下图所示:

    12.png

    2.2 添加 JS 代码

    模板>模板Web属性>数据分析设置选择「为该模板单独设置」,在事件设置中添加「加载结束事件」,如下图所示:

    13.png

    JS 代码如下所示:

    var oPointer = document.getElementsByTagName("img")[0];
             var oTurntable = document.getElementsByTagName("img")[1];
             var cat = 45; //总共7个扇形区域,每个区域约51.4度
             var num = 0; //转圈结束后停留的度数
             var offOn = true; //是否正在抽奖
             oPointer.onclick = function () {
                 if (offOn) {
                     oTurntable.style.transform = "rotate(0deg)";
                     offOn = !offOn;
                     ratating();
                 }
             }
             //旋转
             function ratating() {
                 var timer = null;
                 var rdm = 0; //随机度数
                 var rdm2=0;
                 clearInterval(timer);
                 timer = setInterval(function () {
                     if (Math.floor(rdm / 360) < 3) { rdm = Math.floor(Math.random() * 3600); }
                     else {
                        
                         oTurntable.style.transform = "rotate(" + rdm + "deg)";
                         clearInterval(timer);
                         setTimeout(function () {
                             offOn = !offOn;
                       
                         }, 4000);
                     }
                 }, 200);
             }

    2.3 引用 CSS

    下载并解压 转盘效果.zip , 将「转盘效果」文件夹放在%FR_HOME%\webapps\webroot\scripts\css路径下,如下图所示:

    1571647659408870.png

    然后在模板>模板 Web 属性>引用 Css 引入「转盘效果」文件夹下的 CSS 文件,如下图所示:

    1571623724308448.png

    2.4 效果查看

    保存模板,点击数据分析,效果如本文 1.1章「预期效果」中描述所示。

    注:该方法不支持移动端。

    3. 已完成模板

    已完成的模板,请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\10-JS实现转盘效果.cpt

    点击下载模板:10-JS实现转盘效果.cpt

    点击下载「转盘效果」文件夹:转盘效果.zip 

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览