之前做项目，经常需要一些浮动层加载Loading。
现在好多前端框架都能实现了，最常用的就是 artDialog
下面记录下当时的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
jquery浮动层loading页面加载特效
</title>
<meta name="description" content="jquery浮动层特效或弹出层特效loading页面加载过程，异步加载loading特效。提示用户loading页面加载效果。"
/>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;} a,img{border:0;} .demo{margin:100px
auto 0 auto;width:400px;text-align:center;font-size:18px;} .demo .action{color:#3366cc;text-decoration:none;font-family:"微软雅黑","宋体";}
.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;_padding:0
20px 0 0;background:#f6f4f5;display:none;} .showbox{position:fixed;top:0;left:50%;z-index:9999;opacity:0;filter:alpha(opacity=0);margin-left:-80px;}
*html,*html body{background-image:url(about:blank);background-attachment:fixed;}
*html .showbox,*html .overlay{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
#AjaxLoading{border:1px solid #8CBEDA;color:#37a;font-size:12px;font-weight:bold;}
#AjaxLoading div.loadingWord{width:180px;height:50px;line-height:50px;border:2px
solid #D6E7F2;background:#fff;} #AjaxLoading img{margin:10px 15px;float:left;display:inline;}
</style>
<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function() { var h = $(document).height();
$(".overlay").css({
"height": h
}); $(".action").click(function() { $(".overlay").css({
'display': 'block',
'opacity': '0.8'
}); $(".showbox").stop(true).animate({
'margin-top': '300px',
'opacity': '1'
},
200); setTimeout(function() { $(".showbox").stop(true).animate({
'margin-top': '250px',
'opacity': '0'
},
400); $(".overlay").css({
'display': 'none',
'opacity': '0'
}); },
800); }); });
</script>
<div class="demo">
<a class="action" href="javascript:void(0);">
jquery float浮动层弹出层页面加载特效
</a>
</div>
<div class="overlay">
</div>
<div id="AjaxLoading" class="showbox">
<div class="loadingWord">
<img src="waiting.gif">
加载中，请稍候...
</div>
</div>
<div style="height:1200px;">
</div>
</body> </html>