作业帮 > Javascript > 教育资讯

javascript教程:基于jquery的loading 加载提示效果实现代码

来源:学生作业帮助网 编辑:作业帮 时间:2024/05/11 05:19:28 Javascript
javascript教程:基于jquery的loading 加载提示效果实现代码
javascript教程:基于jquery的loading 加载提示效果实现代码Javascript
【51Test.NET-javascript教程:基于jquery的loading 加载提示效果实现代码】:
loading 加载提示 ······ 透明遮罩 居中 

loading 加载提示······ progressBar_m

代码如下:

body{ 
margin: 0; 
font-size: 12px; 
line-height: 100%; 
font-family: Arial, sans-serif; 
} 
.background { 
display: block; 
width: 100%; 
height: 100%; 
opacity: 0.4; 
filter: alpha(opacity=40); 
background:while; 
position: absolute; 
top: 0; 
left: 0; 
z-index: 2000; 
} 
.progressBar { 
border: solid 2px #86A5AD; 
background: white url(progressBar_m.gif) no-repeat 10px 10px; 
} 
.progressBar { 
display: block; 
width: 148px; 
height: 28px; 
position: fixed; 
top: 50%; 
left: 50%; 
margin-left: -74px; 
margin-top: -14px; 
padding: 10px 10px 10px 50px; 
text-align: left; 
line-height: 27px; 
font-weight: bold; 
position: absolute; 
z-index: 2001; 
} 
 
 
var ajaxbg = $("#background,#progressBar"); 
ajaxbg.hide(); 
$(document).ajaxStart(function () { 
ajaxbg.show(); 
}).ajaxStop(function () { 
ajaxbg.hide(); 
}); 
Javascript