jQuery简单实现内容加载loading提示效果

时间：2014-05-20 编辑：简简单单来源：一聚教程网

图片如下

例子

程序代码

代码如下

复制代码

例子

1、Html代码

打开header.asp，在下插入

代码如下	复制代码

2、Css代码
在layout.css中插入

代码如下	复制代码
#loading{position:fixed;_position:absolute;top:50%;left:50%;width:124px;height:124px;overflow:hidden;background:url(loaderc.gif) no-repeat;z-index:7; margin:-62px 0 0 -62px;}

这里要用到一张124*124的gif动态图片

3、Js代码
在footer.asp中之前插入

代码如下	复制代码

例子

代码如下

复制代码

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();
});

上一个： jQuery ajax XMLHttpRequest cannot load file
下一个： jQuery判断滚动条滚到页面底部脚本

推荐专题

最新下载

热门教程

jQuery简单实现内容加载loading提示效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程