coding++ ：局部 Loading 加载效果

weixin_30500105

于 2019-09-20 15:10:00 发布

阅读量223

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/codingmode/p/11557366.html

本文介绍如何使用JQuery创建遮罩层效果，通过简单的代码实现div元素的遮罩，并展示加载中gif图。关键在于设置div的position为relative及引入JQuery库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$("<div id='shade' style='opacity:0.85;background:white'></div><img src='${ctx}/static/images/loading2.gif'/>").css({ 
  position:'absolute', 
  top:0, 
  left:0, 
  zIndex:300,
  height:'100%',
  width:'100%'
}).appendTo('#id');

其中#id就是你要遮罩的div的id，其中用到的加载中图片 loading2.gif 注意这里文件格式

就是这么简单，这里需要注意的事，要进行遮罩的div的样式要这样设置position:relative（切记，否则达不到你想要的效果！）

忘了说了，这里的js代码是基于JQuery写的，要引入JQuery文件哦！

转载于:https://www.cnblogs.com/codingmode/p/11557366.html