效果预览:

css:

/*#fountainG{
position:relative;
margin:10% auto;
width:240px;
height:29px
}*/
#fountainG{
position:relative;
filter:Alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity:0.3;
opacity:0.3;
background-color:#000;
width:100%;
height:100%;
z-index:;
position:fixed;
left:;
top:;
right:;
bottom:;
display:none;
overflow:hidden;
} .fountainG{
position:absolute;
top:45%;
margin-left: 45%;
background-color:#33cc99;
width:29px;
height:29px;
-webkit-animation:bounce_fountainG 1.3s infinite normal;
-moz-animation:bounce_fountainG 1.3s infinite normal;
-o-animation:bounce_fountainG 1.3s infinite normal;
-ms-animation:bounce_fountainG 1.3s infinite normal;
animation:bounce_fountainG 1.3s infinite normal;
-moz-transform:scale(.3);
-webkit-transform:scale(.3);
-ms-transform:scale(.3);
-o-transform:scale(.3);
transform:scale(.3);
border-radius:19px;
} #fountainG_1{
left:;
-moz-animation-delay:0.52s;
-webkit-animation-delay:0.52s;
-ms-animation-delay:0.52s;
-o-animation-delay:0.52s;
animation-delay:0.52s;
} #fountainG_2{
left:30px;
-moz-animation-delay:0.65s;
-webkit-animation-delay:0.65s;
-ms-animation-delay:0.65s;
-o-animation-delay:0.65s;
animation-delay:0.65s;
} #fountainG_3{
left:60px;
-moz-animation-delay:0.78s;
-webkit-animation-delay:0.78s;
-ms-animation-delay:0.78s;
-o-animation-delay:0.78s;
animation-delay:0.78s;
} #fountainG_4{
left:90px;
-moz-animation-delay:0.91s;
-webkit-animation-delay:0.91s;
-ms-animation-delay:0.91s;
-o-animation-delay:0.91s;
animation-delay:0.91s;
} #fountainG_5{
left:120px;
-moz-animation-delay:1.04s;
-webkit-animation-delay:1.04s;
-ms-animation-delay:1.04s;
-o-animation-delay:1.04s;
animation-delay:1.04s;
} #fountainG_6{
left:150px;
-moz-animation-delay:1.17s;
-webkit-animation-delay:1.17s;
-ms-animation-delay:1.17s;
-o-animation-delay:1.17s;
animation-delay:1.17s;
} #fountainG_7{
left:180px;
-moz-animation-delay:1.3s;
-webkit-animation-delay:1.3s;
-ms-animation-delay:1.3s;
-o-animation-delay:1.3s;
animation-delay:1.3s;
} #fountainG_8{
left:210px;
-moz-animation-delay:1.43s;
-webkit-animation-delay:1.43s;
-ms-animation-delay:1.43s;
-o-animation-delay:1.43s;
animation-delay:1.43s;
} @-moz-keyframes bounce_fountainG{
0%{
-moz-transform:scale(1);
background-color:#33cc99;
} 100%{
-moz-transform:scale(.3);
background-color:#0099cc;
} } @-webkit-keyframes bounce_fountainG{
0%{
-webkit-transform:scale(1);
background-color:#33cc99;
} 100%{
-webkit-transform:scale(.3);
background-color:#0099cc;
} } @-ms-keyframes bounce_fountainG{
0%{
-ms-transform:scale(1);
background-color:#33cc99;
} 100%{
-ms-transform:scale(.3);
background-color:#0099cc;
} } @-o-keyframes bounce_fountainG{
0%{
-o-transform:scale(1);
background-color:#33cc99;
} 100%{
-o-transform:scale(.3);
background-color:#0099cc;
} } @keyframes bounce_fountainG{
0%{
transform:scale(1);
background-color:#33cc99;
} 100%{
transform:scale(.3);
background-color:#0099cc;
} }

html:

 <div id="fountainG">
<div id="fountainG_1" class="fountainG">
</div>
<div id="fountainG_2" class="fountainG">
</div>
<div id="fountainG_3" class="fountainG">
</div>
<div id="fountainG_4" class="fountainG">
</div>
<div id="fountainG_5" class="fountainG">
</div>
<div id="fountainG_6" class="fountainG">
</div>
<div id="fountainG_7" class="fountainG">
</div>
<div id="fountainG_8" class="fountainG">
</div>
</div>

js:


//加载动画效果
function showLoad(){
$('#fountainG').show();
}
//隐藏动画效果
function hiddenLoad(){
$('#fountainG').hide();
}

function resultAjax(url, data) {
var result;
$.ajax({
url: $.contextPath() + url,
type: 'get',
async: true, //注意这里
cache: false,
contentType: 'application/json',
data: data,
dataType: 'json',
beforeSend: function (){
//ajax刷新前加载load动画
showLoad();
},
success: function(data) {
//TODO
},
error: function(data) {
commonAlert('出现了一点小问题','error');
},
complete:function () {
//完成以后隐藏load动画
hiddenLoad();
} });
return result;
}

给web请求加遮罩动画的更多相关文章

  1. 三、js提交请求加载启动动画、请求完成成功回调、注销加载动画

    1.通过Query  post方式进行异步请求方法 jQuery.post(url, [data], [callback], [type]) 参数说明: url:发送请求地址 data:待发送 Key ...

  2. 转: web 页面加载速度优化实战-100% 的飞跃提升

    前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...

  3. 加载动画插件spin.js的使用随笔

    背景: 在请求后台的“漫长”等待过程中,为了提升用户体验,需要一个类似  的加载动画效果,让用户明确现在处于请求过程中,而不是机子down掉或者网站死了 静态demo(未与后台交互): HTML代码如 ...

  4. web页面加载速度缓慢,如何优化?

    参考博客: https://www.cnblogs.com/xp796/p/5236945.html https://www.cnblogs.com/MarcoHan/p/5295398.html - ...

  5. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  6. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  7. Web请求响应简单整理

      简单对Web请求响应如何处理进行的整理,难免有理解不到位,理解有偏差的地方,如有理解有误的地方,希望大牛批评指正. 1.Web开发的定义首先看看微软对Web开发的定义:Web开发是一个指代网页或网 ...

  8. JAVA Web.xml 加载顺序

    web.xml加载过程(步骤): 1.启动WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点: <listener></listener> ...

  9. Java web.xml加载顺序

     web.xml加载过程(步骤): 1.启动WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点:   <listener></listener&g ...

随机推荐

  1. JS中将json字符串转为json对象的三种方式

    第一种:利用JSON的parse方法,即jsonObj=JSON.parse(jsonStr); 第二种:jsonObj = eval('(' + jsonStr+ ')'); 第三种:比较难理解:j ...

  2. java消息队列--ActiveMQ

    1.下载安装ActiveMQ ActiveMQ官网下载地址:http://activemq.apache.org/download.html ActiveMQ 提供了Windows 和Linux.Un ...

  3. WinForm中 Asp.Net Signalr消息推送测试实例

    p{ text-align:center; } blockquote > p > span{ text-align:center; font-size: 18px; color: #ff0 ...

  4. centos7基于SVN+Apache+IF.svnadmin实现SVN的web管理

    一.介绍 本文介绍的是CentOS7上搭建基于Apache.SVN Server.iF.svnadmin实现web后台可视化管理SVN. iF.SVNAdmin应用程序是Subversion授权文件基 ...

  5. EL有11个隐含对象

    EL有11个隐含对象: 隐含对象                    类型                                             说明                ...

  6. tomcat1(servlet,http,socket)

    1.servlet容器是如何工作的? a.创建一个request对象,用可能会在调用的Servlet中使用到的信息填充该request对象(参数,头,cookies,查询字符串,URI等).reque ...

  7. 安卓BLE测试apk

    安卓蓝牙测试APP 文件下载:蓝牙测试.apk

  8. 《CSS世界》读书笔记(十六)

    <!-- <CSS世界>张鑫旭著 --> line-height与“垂直居中” line-height 可以让单行或多行元素近似垂直居中,原因在于 CSS 中“行距的上下等分机 ...

  9. Linux的DNS配置1-DNS入门

    1.DNS简介 1)什么是“DNS”? DNS,简单地说,就是Domain Name System,翻成中文就是“域名系统” 2)DNS有什么用途? 在一个TCP/IP架构的网络(例如Internet ...

  10. window.location.search 在url中有?name=value时仍为‘’的情况

    1,当页面有hash#值 而?name=value在hash #的串后面将会有这种结果 2,为什么 window.location.search 为空? 答:注意上面的search和hash的区别,如 ...