$("<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. http协议入门---转载

    http协议入门 ##(一). HTTP/0.9 HTTP 是基于 TCP/IP 协议的应用层协议.它不涉及数据包(packet)传输,主要规定了客户端和服务器之间的通信格式,默认使用80端口. 最早 ...

  2. PHP sprintf() 函数详解

    PHP中,sprintf()的作用是把字符串进行多种类型的格式化一般用法如下: sprintf ( string $format [, mixed $... ] ) : string 返回一个按要求格 ...

  3. git版本回退问题记录

    因为之前有个前端改了文件目录进行合并时候丢失掉些许代码,然后我在以前分支进行了代码层级的整理,项目如果想要启动还需还原回以前的版本,我进行了三次文件夹层级提交,所以我需要进行三次的版本回退. git命 ...

  4. Nginx之负载均衡配置(二)

    前文我们聊到了nginx作为负载均衡的配置,前端nginx作为调度器调度http或https请求,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12458159 ...

  5. openwrt sdk 编译工具 及 hello world

    需要先在 make menuconfig 中打开 sdk make -j4在 bin\targets\ramips\mt7620生成一个openwrt-sdk-ramips-mt7620_gcc-7. ...

  6. 鸟哥的Linux私房菜基础学习篇(第三版)——阅读笔记(二)

    第一章 Linux是什么 1.Linux是什么 一套操作系统 早期的Linux是针对386开发的 具有可移植性 2.Unix及Linux的发展史 1973年,Unix诞生,Ritchie等人以C语言写 ...

  7. Notepad++远程连接Linux

    为方便编辑Linux上的文件,我们可以用Notepad++的NppFTP插件 工具:Notepad++.CentOS 1.通过ifconfig命令找到主机ip 2.打开Notepad++插件NppFT ...

  8. [android]com.android.support:appcompat-v7:XXX 包导入无法Build

    在学习<Android编程权威指南>时,按书中要求添加com.android.support:appcompat的依赖,然后编译不通过,提示如下问题: 大概意思是,Android Pie之 ...

  9. Python基础类型(1)

    整数 整数在Python中的关键字用int来表示; 整型在计算机中运于计算和比较 在32位机器上int的范围是:  -2**31-2**31-1,即-2147483648-2147483647 在64 ...

  10. 何为引用法---细谈C++引用

    何为引用...给已有的变量取别名 ; int &a = num;//此处 &不是取地址 而是标明 a是引用变量(a 是 num的别名) 注意: 1.引用必须初始化 2.引用一旦初始化 ...