帮你打开活字格更神奇的功能：五十三，页面加载动画（不占用页面位置）

收藏

本帖最后由 Eric.Liang 于 2018-12-27 15:40 编辑

很久没有给大家分享活字格的特别操作了。这两天又发现了一个比较好玩的东西。
其实大家应该也都知道我们可以在活字格设计器中放置一个gif的动图，数据在加载或者进行某些操作时显示动图，提示用户正在操作。

可是原本的加载动画需要占用设计器中的某些单元格，导致页面有些特定的区域不能使用。会感觉使用起来很不友好。

那么，如果你想在不影响页面布局的情况下加入加载动画应该怎么做呢？福利来了。

效果如下：
加载动画.gif

大家会发现，在设计器上我并没有绑定gif图片，这样的功能到底是怎么实现的呢？请大家一起来看看

其实，了解代码的小伙伴应该都知道，HTML网页上的元素都是可以通过JS代码去添加和删除的。

这个功能主要是通过JS代码在点击按钮的时候去将资源文件夹中的动图添加到页面上，命令执行完毕之后再将添加的元素移除。
1.添加图片元素代码

var gifpage = document.createElement("img");
gifpage.setAttribute("id", "gif");
var gifwidth = document.body.clientWidth; //得到body元素的宽度
gifpage.src = Forguncy.Helper.SpecialPath.getImageEditorUploadImageFolderPath()+"page_loading.gif"; //gif动图所在目录
gifpage.style.position = "absolute"; //CSS样式，规定元素定位类型
gifpage.style.height = "150px"; //设置元素的高
gifpage.style.width = "150px"; //设置元素的宽
gifpage.style.top = "20%"; //设置元素的顶边缘
gifpage.style.left = (parseInt(gifwidth / 2)-70) + "px"; //设置元素的左边缘
document.body.appendChild(gifpage); //将该元素添加到body页面上

复制代码

2.移除图片元素代码

var gifpage = document.getElementById("gif");
document.body.removeChild(gifpage);

复制代码

3.资源图片位置

工程文件见附件。感兴趣的小伙伴可以学习学习

		自动登录	找回密码
密码			立即注册

[神奇功能] 帮你打开活字格更神奇的功能：五十三，页面加载动画（不占用页面位置）

0 个回复

讲师达人

悬赏达人

元老葡萄

活字格认证

活字格高级认证

微信认证勋章