给web请求加遮罩动画
效果预览:
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:1200;
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
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:0;
-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;
}
转载于//www.cnblogs.com/UncleWang001/p/10648634.html
还没有评论,来说两句吧...