反馈已提交

网络繁忙

登录页添加粒子联结特效

  • 文档创建者:Leo.Tsai
  • 编辑次数:6次
  • 最近更新:onlyxx 于 2021-03-29

  • 1. 概述

    1.1 预期效果

    登录页出现粒子特效,粒子间通过线条动态联结,移动鼠标会聚集粒子,鼠标点击页面会按顺序显示社会主义核心价值观,效果如下图所示:

    1594693461136612.gif

    1.2 实现思路

    安装 决策平台注入代码插件 ,修改登录页代码进而实现粒子联结特效。

    2. 操作步骤

    2.1 安装插件

    点击下载插件:决策平台注入代码插件

    设计器插件安装方法参见:设计器插件管理

    服务器安装插件方法参见:服务器插件管理

    注1:设计器内插件管理页面搜索的插件名称与插件市场不一致,设计器内安装插件请搜索:统计代码。

    注2:插件安装后需要重启FR才能生效。

    2.2 插入代码

    插件安装并重启设计器后,登录决策系统,选择管理系统>系统管理>登录界面JS配置,在Head前Html结束前分别插入代码,点击保存按钮,

    注意:配置最下面还有一个管理后台js配置,如果不清楚如何使用保持为空!!!

    如下图所示:

    image.png

    Head前代码如下:

    <style>
    .text-popup {
        animation: textPopup 1s;
        color: red;
        user-select: none;
        white-space: nowrap;
        position: absolute;
        z-index: 99;
    }
    @keyframes textPopup {
        0%, 100% {
            opacity: 0;
        }
        5% {
            opacity: 1;
        }
        100% {
            transform: translateY(-50px);    
        }
    }
    </style>

    <script>
    var fnTextPopup = function (arr, options) {
        // arr参数是必须的
        if (!arr || !arr.length) {
            return;    
        }
        // 主逻辑
        var index = 0;
        document.documentElement.addEventListener('click', function (event) {
            var x = event.pageX, y = event.pageY;
            var eleText = document.createElement('span');
            eleText.className = 'text-popup';
            this.appendChild(eleText);
            if (arr[index]) {
                eleText.innerHTML = arr[index];
            } else {
                index = 0;
                eleText.innerHTML = arr[0];
            }
            // 动画结束后删除自己
            eleText.addEventListener('animationend', function () {
                eleText.parentNode.removeChild(eleText);
            });
            // 位置
            eleText.style.left = (x - eleText.clientWidth / 2) + 'px';

       eleText.style.top = (y - eleText.clientHeight) + 'px';
            // index递增
            index++;
        });    
    };

    fnTextPopup(['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']);
    </script>

    HTML结束前代码如下:

    <script  color="0,0,255" opacity='0.7'  count="99"   src="https://cdn.bootcss.com/canvas-nest.js/2.0.4/canvas-nest.js"></script>

    2.3 效果预览

    注销当前登录的账号,返回决策系统登录页,效果如1.1预期效果中所示。

    2.4 清除特效

    如果想清除特效恢复到默认登录页,只需要删除代码点击保存按钮即可。

    注意如果因为错误配置导致无法进入系统,或者看不到配置界面,可以使用数据库工具连接FINE DB 删除“fine_conf_entity”表中的GaConfig.ga,GaConfig.ge,GaConfig.gc 这三条记录,并重启帆软即可恢复。

    附件列表


    主题: 数据决策系统
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

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

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

    不再提示

    10s后关闭

    7*24h

    智 能客 服