$("<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. Reids(4)——神奇的HyperLoglog解决统计问题

    一.HyperLogLog 简介 HyperLogLog 是最早由 Flajolet 及其同事在 2007 年提出的一种 估算基数的近似最优算法.但跟原版论文不同的是,好像很多书包括 Redis 作者 ...

  2. sql--自链接(推荐人)

    表1: 需求:查出推荐人,和被推荐人 1.通过group_concat函数和分组,查出每个id推荐的人有哪些 select group_concat(u_name, u_id) as referce_ ...

  3. 前端每日实战:113# 视频演示如何用纯 CSS 创作一个赛车 loader

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

  4. 日常破解--XCTF easy_apk

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

  5. 编译putty 源码去掉 Are you sure you want to close this session? 提示

    0, 为什么要编译 putty ?在关闭窗口的时候,会弹出一个 Are you sure you want to close this session?要把这个去掉.当然也可以用 OD 之类的来修改. ...

  6. mybatis深入之动态查询和连接池介绍

    mybatis深入之动态查询和连接池介绍 一.mybatis条件查询 在mybatis前述案例中,我们的查询条件都是确定的.但在实际使用的时候,我们的查询条件有可能是动态变化的.例如,查询参数为一个u ...

  7. js 数组一些简单应用

    把两个数组连接成按从小到大的一个数组例如: var allowVlan = '23-25,45,4-6,67,50-53'; var unTagVlan = '1-5'; 完成时应该是1-6,23-2 ...

  8. 简单认识并使用JavaScript【供后端人员作为了解】

    JS(JavaScript)Web的脚本语言 脚本语言:无法独立执行,必须嵌入到其他语言当中结合使用 作用:控制页面特效展示 注:JavaScript没有访问系统的权限,并且JavaScript和Ja ...

  9. java-字节流练习(新手)

    参考手册: 关键字: FileInputStream() Input是从硬盘到内存 FileOutputStream() 而output是从内存到硬盘,所以实现了复制粘贴. read() 调用方法读取 ...

  10. DS博客作业02--栈和队列

    0.PTA得分截图 1.本周学习总结 1.1总结栈和队列内容 栈的存储结构及操作 栈的顺序存储结构 typedef struct { ElemType data[MaxSize]: int top: ...