$("<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文件哦!

coding++ :局部 Loading 加载效果的更多相关文章

  1. [js开源组件开发]loading加载效果

    loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...

  2. vue2 自定义全局组件(Loading加载效果)

    vue2 自定义全局组件(Loading加载效果) github地址: https://github.com/ccyinghua/custom-global-component 一.构建项目 vue ...

  3. 基于jquery实现页面loading加载效果

    实现loading 加载提示 ······ 透明遮罩 居中效果 具体代码如下: CSS样式部分: <style type="text/css"> .background ...

  4. 页面加载完成前的loading加载效果

    /*loading.js*/ // 加载HTML图 var _LoadingHtml = '<div id="loadingDiv" style="position ...

  5. 移动端最强适配(rem适配之px2rem)&& 移动端结合Vuex实现简单loading加载效果

    一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...

  6. CSS动画实例:Loading加载动画效果(一)

    一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...

  7. CSS动画实例:Loading加载动画效果(三)

    3.小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...

  8. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  9. HTML5 五彩圆环Loading加载动画实现教程

    原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...

随机推荐

  1. 前端每日实战:7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交 ...

  2. IDEA 配置自定义Apache与PHP环境

    1. PHP环境 1.1 插件的安装 1.2 关于php环境的配置 2.关于apache的配置 至此,已经配置成功啦,愉快的学习吧!

  3. RNN学习笔记(一):长短时记忆网络(LSTM)

    一.前言 在图像处理领域,卷积神经网络(Convolution Nerual Network,CNN)凭借其强大的性能取得了广泛的应用.作为一种前馈网络,CNN中各输入之间是相互独立的,每层神经元的信 ...

  4. 日常破解--XCTF easy_apk

    一.题目来源     来源:XCTF社区安卓题目easy_apk 二.破解思路     1.首先运行一下给的apk,发现就一个输入框和一个按钮,随便点击一下,发现弹出Toast验证失败.如下图所示: ...

  5. promise迷你书-读书笔记

    Promise三种类型 Constructor 使用Promise构造器来实例化一个promise对象 var promise = new Promise(function(resolve,rejec ...

  6. 以正确的方式下载和配置 ASP.NET Core 官方源码

    我们可以在Github上面直接查看ASP.NET Core 3.x的源代码,但是我们也可以把源代码下载下来进行查看. 而下载源代码进行查看有很多好处: 任意的导航源代码 内置了一个示例项目 直接调试源 ...

  7. http2 技术整理 nginx 搭建 http2 wireshark 抓包分析 server push 服务端推送

    使用 nginx 搭建一个 http2 的站点,准备所需: 1,域名 .com .net 均可(国内域名需要 icp 备案) 2,云主机一个,可以自由的安装配置软件的服务器 3,https 证书 ht ...

  8. ASP.NET Core ActionFilter引发的一个EF异常

    最近在使用ASP.NET Core的时候出现了一个奇怪的问题.在一个Controller上使用了一个ActionFilter之后经常出现EF报错. InvalidOperationException: ...

  9. CSRF攻击原理及预防手段

      CSRF全程 Cross Site Request Forgery, 跨站域请求伪造.这种攻击方式相对于XSS,SQL注入等攻击方式比较晚被发现,今天就来讲解下这种攻击方式以及避免方式. 攻击过程 ...

  10. Pyppeteer入门(转载)

    一.简介 Puppeteer 是 Google 基于 Node.js 开发的一个工具,有了它我们可以通过 JavaScript 来控制 Chrome 浏览器的一些操作,当然也可以用作网络爬虫上,其 A ...