历史版本6 :登录页添加粒子联结特效 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 概述编辑
1.1 预期效果
登录页出现粒子特效,粒子间通过线条动态联结,移动鼠标会聚集粒子,鼠标点击页面会按顺序显示社会主义核心价值观,效果如下图所示:
1.2 实现思路
安装 决策平台注入代码插件 ,修改登录页代码进而实现粒子联结特效。
2. 操作步骤编辑
2.1 安装插件
点击下载插件:决策平台注入代码插件
设计器插件安装方法参见:设计器插件管理
服务器安装插件方法参见:服务器插件管理
注1:设计器内插件管理页面搜索的插件名称与插件市场不一致,设计器内安装插件请搜索:统计代码。
注2:插件安装后需要重启FR才能生效。
2.2 插入代码
插件安装并重启设计器后,登录决策系统,选择管理系统>系统管理>登录界面JS配置,在Head前、Html结束前分别插入代码,点击保存按钮,如下图所示:
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 清除特效
如果想清除特效恢复到默认登录页,只需要删除代码点击保存按钮即可。