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动画颜色很丰富,并且在转圈 ...
随机推荐
- 连接器巨头Molex莫仕大裁员,CEO更迭
序言:中美贸易战的大环境下,美国多方面限制对华出口电子科技,其中影响最大的莫过于限制芯片出口,中国本土芯片和电子产业也在蓬勃的发展.根据正能量电子了解连接器巨头MOLEX莫仕公司收入的1/3是来自于对 ...
- Metaploit-永恒之蓝漏洞利用
目录 Metaploit介绍 实验环境 漏洞利用过程 Metaploit介绍 本次测试主要是利用永恒之蓝漏洞对windows7进行控制利用,掌握Metaploit工具的使用,知道永恒之蓝的漏洞利用原理 ...
- MyBatis配置文件中config与mapper的约束
本文链接:https://blog.csdn.net/gaoxin_gx/article/details/100183455 Config的约束: <?xml version="1.0 ...
- HTML img标签的width height ismap usemap title alt 属性
前言 img 元素向网页中嵌入一幅图像 今天特地对 img 的几个属性做了一下测试,在这里做一个笔记. 1. img 元素的width属性和height属性. (1)不设置 width 和 和 hei ...
- CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
- Object-Oriented Programming Summary Ⅰ
Part 0: 前言 令人闻风丧胆的OO还是来了.并没有像名字的外表一样可爱,简直就是恶魔. 疯狂压榨OS的时间,周末无法休息,互测狼人机制 虽然网上骂声很多,就算改进到9012年还是有很多不足的地方 ...
- JavaScript实现树结构(二)
JavaScript实现树结构(二) 一.二叉搜索树的封装 二叉树搜索树的基本属性: 如图所示:二叉搜索树有四个最基本的属性:指向节点的根(root),节点中的键(key).左指针(right).右指 ...
- 基于Ubuntu+Python+Tensorflow+Jupyter notebook搭建深度学习环境
基于Ubuntu+Python+Tensorflow+Jupyter notebook搭建深度学习环境 前言一.环境准备环境介绍软件下载VMware下安装UbuntuUbuntu下Anaconda的安 ...
- flask 部署外部访问
在 app.run(host='0.0.0.0',port=5000) 可以让外部客户端进行访问,访问地址是flask服务器的ip地址和你设置的端口(端口注意不要占用其他端口,如果是阿里云有可能要设置 ...
- URL及short URL短网址
URL,uniform resource locator,经常被称为网址,尤其是在使用HTTP的时候.通常是一个指向某个资源的字符串. URLs经常被用于网页(http),但也可以用于文件传输(f ...