前端页面给指定的div添加遮罩层，并且带有加载中的小旋转图片

最新推荐文章于 2025-05-27 15:35:09 发布

原创最新推荐文章于 2025-05-27 15:35:09 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍如何使用 JQuery 实现一个简单的 Div 遮罩效果，并附带加载中图片显示。该方法通过调整遮罩层的 CSS 属性实现，确保遮罩层覆盖目标 Div 的整个区域。

话不多说，先上代码，其实还是比较简单的

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

其中#id就是你要遮罩的div的id，其中用到的加载中图片：加载中图片

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

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

效果图：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

oIdmonk

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS3 实现Loading加载，页面遮罩层的应用2017/8/15

08-15

应用移动H5领域。CSS3 实现Loading加载，页面遮罩层的应用。

前端-商品遮罩层（多种方法实现）

01-04

遮罩层:可以将与遮罩层相链接的图形中的图像遮盖起来。用户可以将多个层组合放在一个遮罩层下,以创建出多样...

2 条评论您还未登录，请先登录后发表或查看评论

前端页面加蒙版的几种方法

qq_43296918的博客

05-27

1万+

前端界面通常常需要在区域上加蒙版以下个人整理了几种添加蒙版介绍 one 采用定位的父子级别加蒙版,采用子绝父相对的方式，需要注意层级性。  <div class="wrap">  <div class="inner"...

遮罩层以及加载

d125800000的博客

04-19

338

jQuery遮罩层以及加载图标动画。

css实现加载遮罩层 CSS 模糊效果 CSS 黑白效果 CSS调整亮度对比度饱和度模糊效果黑白效果反转颜色

半只

09-22

2688

设置模糊为 1px, 亮度增加 60%, 对比度增加 60%, 饱和度增加 100%, 灰度 100%用于调整元素与背景之间的对比度，可以设置一个百分比值或者一个具体的颜色值，例如。用于增加或减少元素的饱和度，可以设置一个百分比值或者一个具体的颜色值，例如。用于将元素转换为灰度图像，可以设置一个百分比值或者一个具体的颜色值，例如。用于调整元素的亮度，可以设置一个百分比值或者一个具体的颜色值，例如。用于模糊元素，可以设置模糊的程度，例如。表示将元素与背景的对比度增加60%。表示将元素亮度增加60%

网页添加div 遮罩层 js+css 半透明效果

智能制造及企业数字化

10-11

4455

1。在网页添加样式 #lestenSessionDiv { position:absolute; left:0%; top:0%; width:100%; height:100%; z-index:1000; filter: Alpha(Opacity=50); background-color: #FFFFFF;

网页蒙层实现加载效果

u011175079的博客

12-08

1678

最近做移动应用的一个商城项目，需要实现一个全屏蒙层显示加载效果，记录下来，以免以后用的着，，效果图：直接上代码：半透明实例在线演示 @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-t

html+遮罩未隐藏,页面用一个遮罩层显示加载，加载完后隐藏该div

weixin_30600605的博客

06-02

376

.progressBar {display: block;width: 65px;height: 65px;top: %;left: %;margin-left: -74px;margin-top: -14px;padding: 10px;text-align: left;line-height: 27px;font-weight: bold;position: fixed;z-index: ;}...

H5 web前端工程简历中的项目经验

2401_84619606的博客

06-15

1103

函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；它提倡着纯函数 / 函数复合 / 数据不可变，谨慎对待函数内的状态共享 / 依赖外部 / 副作用；Tips:其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的。

如何写H5/web前端工程简历中的项目经验

热门推荐

Java仗剑走天涯

09-17

13万+

如何写H5/web前端工程简历中的项目经验

H5/web前端工程简历中的项目经验

web全栈开发的博客

05-19

3万+

有不少前端工程师，在写简历时就发愁。简历中的项目怎么写，怎么描述。觉得自己虽然工作了好几年，做过许多项目，但是觉得都没做什么高大上的事情，自然就觉得没啥可写的。或者觉得做的事情都一样，写来写去都那几样。一、第一种项目风格项目：腾讯管家前端动画作品描述：该项目将一个完整flash剧情动画还原成一个由JS+CSS3实现的前端动画。链接：https://dxb123456.github.io/tengxun/ **实现技术：**CSS+HTML+JS+H5+CSS3+jqury；项目难点： 1.定时器的

给div设置遮罩层

BePowerful的博客

01-04

3927

父标签设置：position: relative 自身标签样式 .mask{ position: absolute; width: 100%; height: 100% left: 0; right: 0; bottom: 0; top: 0; background-color: black; opacity: .1; filter: alpha(opacity=10); z-index: 100; } 若是想整个屏幕都遮盖住： .mask{ position: fix

CSS3 实现Loading加载，页面遮罩层的应用

08-03

应用移动H5领域。CSS3 实现Loading加载，页面遮罩层的应用。

为指定的元素添加遮罩层的示例代码

12-11

代码如下: //遮罩层 $j(“<div id=’shade’></div>”).css({ position:’absolute’, top:0, left:0, backgroundColor:”#808080″, opacity:0.1, zIndex:300 }).height($j(document).height()).width($j(document).width()).hide().appendTo(“#bgCover”); bgCover为目标元素的id

经典前端手风琴、遮罩、焦点轮播、旋转木马效果源码

04-11

经典前端手风琴、遮罩、焦点轮播、旋转木马效果源码

div遮罩层

黎小小的博客

07-05

1万+

实现遮盖层，使一部分区域不可点击编辑等。 1.简易遮罩层一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, i...

前端开发中遮罩层的作用和使用场景

m0_57742630的博客

05-30

3911

登录/注册框：当网站需要用户登录或者注册时，可以使用遮罩层覆盖在页面上方，防止用户直接点击其他链接跳转到其他页面。模态框：当弹出模态框时，遮罩层可以覆盖在整个页面上，使得用户只能与模态框交互，从而实现了浮层的视觉效果。页面加载过程中：当页面需要加载一些耗时资源（如图片、视频等）时，可以使用遮罩层提示用户页面正在加载中。然后，在 JavaScript 中，我们监听了按钮的点击事件，并在回调函数中将遮罩层的。在上面的代码中，我们首先定义了一个按钮和一个遮罩层。

前端页面怎么添加遮罩层

weixin_45457797的博客

12-08

1743

关于遮罩层，最常用到的场景就是在前端请求过程中和导航栏下拉。

前端动态上传文件与遮罩层实现