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动画颜色很丰富,并且在转圈 ...
随机推荐
- Node REPL环境
1.概述 REPL全称Read,Eval,Print,Loop,简单理解为接收用户输入,执行用户输入,打印执行结果并输出到控制台,进行下一次轮回,可以进行一些简单的测试,类似于浏览器的控制台. 命令行 ...
- WebAPI-处理架构
带着问题去思考,大家好! 问题1:HTTP请求和返回相应的HTTP响应信息之间发生了什么? 1:首先是最底层,托管层,位于WebAPI和底层HTTP栈之间 2:其次是 消息处理程序管道层,这里比如日志 ...
- 7-4 jmu-python-判断是否构成三角形 (10 分)
7-4 jmu-python-判断是否构成三角形 (10 分) 输入三角形的三边,判断是否能构成三角形.若能构成输出yes,否则输出no. 输入格式: 在一行中直接输入3个整数,3个整数之间各用一 ...
-  前端面试题目总结1
数据类型 js中的数据类型有两类:值类型和引用类型 值类型:number.string.boolean.Symbol.undefined 引用类型:null.数组.对象 使用typeof能用来干什么 ...
- js对象中关于this关键字的作用
前两天在前端群看到群友问的一个问题,问题如下: var Name = 'window'; var obj = { Name:'obj字符串', getName:function(){ console. ...
- Mac结合Docker开发
Mac结合Docker开发 前几天在看Java并发实战时,在Mac上写了一个示例,结果运行后无法按照书本上运行.主要是有些命令,在Mac和Linux是有区别的,比如top, Mac上是不支持-Hp,意 ...
- vue的插件使用
插件通常是为Vue添加全局功能,vue的官网介绍了5中添加插件的方法. vue的插件有个公开方法install.第一个参数是Vue构造器,第二个参数是一个可选的选项对象. 在plugin.js中可以这 ...
- 一次 Druid 连接池泄露引发的血案!
最近某个应用程序老是卡,需要重启才能解决问题,导致被各种投诉,排查问题是 Druid 连接池泄露引发的血案.. 异常日志如下: ERROR - com.alibaba.druid.pool.GetCo ...
- IntelliJ IDEA 2020 全家桶注册码
WU78YHTY7E-eyJsaWNlbnNlSWQiOiJPUVQzT0oyNVhFIiwibGljZW5zZWVOYW1lIjoi5rC45LmF5r+A5rS7IGlkZWEubWVkZW1pb ...
- drf分页功能
什么是restful规范 是一套规则,用于程序之间进行数据交换的约定. 他规定了一些协议,对我们感受最直接的的是,以前写增删改查需要写4个接口,restful规范的就是1 个接口,根据method的不 ...