coding++ :局部 Loading 加载效果
$("<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 加载效果的更多相关文章
- [js开源组件开发]loading加载效果
loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...
- vue2 自定义全局组件(Loading加载效果)
vue2 自定义全局组件(Loading加载效果) github地址: https://github.com/ccyinghua/custom-global-component 一.构建项目 vue ...
- 基于jquery实现页面loading加载效果
实现loading 加载提示 ······ 透明遮罩 居中效果 具体代码如下: CSS样式部分: <style type="text/css"> .background ...
- 页面加载完成前的loading加载效果
/*loading.js*/ // 加载HTML图 var _LoadingHtml = '<div id="loadingDiv" style="position ...
- 移动端最强适配(rem适配之px2rem)&& 移动端结合Vuex实现简单loading加载效果
一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...
- CSS动画实例:Loading加载动画效果(一)
一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...
- CSS动画实例:Loading加载动画效果(三)
3.小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- HTML5 五彩圆环Loading加载动画实现教程
原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...
随机推荐
- Python第一周基本语句学习整理
目录 Python第一周基本语句学习整理 一.字符串切割 二.体重单位转换 三.计算器的实现 四.猜年龄游戏 Python第一周基本语句学习整理 一.字符串切割 代码实现: s = 'luowenxi ...
- 细说集群技术(Cluster)
今天本人给大家讲解一些我对集群技术一个理解,如有不对的或者讲的不好的可以多多提出,我会进行相应的更改,先提前感谢提出意见的各位了!!! 集群(Cluster)技术:通过此可以用较低的成本获取较高的性能 ...
- linux4.1.36 解决 SPI 时钟找不到 不生成设备 device
最初的问题是 编译内核添加了 spi 支持,配置了 board 后,加载25q64驱动不执行probe 函数. 然后发现是,spi-s3c24xx.c 中的 probe 没有执行完就退出了 没有生成 ...
- Redis01——Redis究竟支持哪些数据结构
Redis已经越来越多地应用到互联网技术中,而关于Redis的相关问题,也成为面试中必不可少的一部分,本文开始将会逐渐把我了解到的关于Redis的一些面试问题整理出来,供各位参考,如有不对之处,烦请指 ...
- C++ 回调函数,拷贝文件
#include <iostream> #include <windows.h> using namespace std; unsigned long long transla ...
- 在vue中实现锚点定位功能
场景如下: 今天早上看到需求方新提的一个需求,这是一份网上答卷,点击题数要实现滚动到对应题目的位置: 注意点:每题题目的高度是不受控制的,你可以取到想跳转的index:(我再循环题目时做了index+ ...
- [BUG]excel复制到input含有不可见内容(零宽字符)
现象 excel手机号复制到input框子, length长度和可见长度不一致. "176xxxx1115" 长度是 13 而不是 11. 原因 手机号前后被 excel 插入 ...
- vscode 新版设置备份20200221 settings.json
vscode 新版设置备份20200221 { "sync.gist": "9e6a5f7e8c52047b03c8732ff88aab0e", "s ...
- @on-row-click="$emit('on-row-click', arguments[0], arguments[1])" 行内返回事件的一种写法
@on-row-click="$emit('on-row-click', arguments[0], arguments[1])"
- ElasticSearch之映射常用操作
本文案例操作,建议先阅读我之前的文章<ElasticSearch之安装及基本操作API> Mapping (映射)类似关系型数据库中的表的结构定义.我们将数据以 JSON 格式存入到 El ...