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,其中用到的加载中图片 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. Ambari2.7.4+HDP3.1.4安装 Centos7离线安装

    一. Ambari等简单介绍 1.1Ambari Ambari是一种基于Web的工具,支持Apache Hadoop集群的创建 .管理和监控. Ambari已支持大多数Hadoop组件,包括HDFS. ...

  2. JavaScript,ajax与springboot之间的传参方式

    Springboot:@PostMapping("/mDelTest")public String mDelTest (@RequestBody List<String> ...

  3. 微信小程序状态管理工具 JStore

    微信小程序状态管理工具 JStore 闲着没事做,就想着给微信小程序写一个状态管理工具,名叫 JStore,这个状态管理工具是仿照 vuex 的几个方法来写的,所以有 vuex 的基础同学很容易理解. ...

  4. 解决 Highcharts 中 yAxis 的 max 设置无效的问题

    问题场景 $(function () { Highcharts.chart('container', { title: { text: 'line' }, xAxis: { categories: [ ...

  5. Await/Async

    Async其实就是Generator函数的语法糖. 啥是语法糖?就是一种更容易让人理解,代码可读性更高的另外一种语法. const asyncRead = async function(){ cons ...

  6. Map - 与君初相识

    前言 生活中,我们常会看到这样一种集合:IP地址与主机名,身份证号与个人等,这种一 一对应的关系,就叫做映射.Java提供了专门的集合类用来存放这种对应关系的对象,即 java.util.Map 接口 ...

  7. 1构建个人博客--使用Hugo快速成型

    概述 人在武汉,病毒肆虐. 隔离久了,有点闷,闲余时间找点事情做. 建个博客吧, 内容不重要,写不写也不那么要紧,目前水平也写不出什么有深度的东西. 但是这个姿势一定要优美, 过程一定要折腾. OK, ...

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

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

  9. Python面向对象之:类空间问题以及类之间的关系

    一. 类的空间问题 1.1 何处可以添加对象属性   class A: def __init__(self,name): self.name = name def func(self,sex): se ...

  10. 常见的几种JavaScript内存泄露

    总结一下常见的几种JavaScript内存泄露: 1.意外的全局变量 全局变量属于window对象,所以只会随着window销毁才会销毁. 2.console.log() conaole.log()函 ...