代码改变世界

JQuery浮动层Loading页面加载特效

2013-12-04 13:34  taozsay  阅读(646)  评论(0)    收藏  举报

之前做项目，经常需要一些浮动层加载Loading。

现在好多前端框架都能实现了，最常用的就是 artDialog 

下面记录下当时的代码。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>
 6             jquery浮动层loading页面加载特效
 7         </title>
 8         <meta name="description" content="jquery浮动层特效或弹出层特效loading页面加载过程，异步加载loading特效。提示用户loading页面加载效果。"
 9         />
10     </head>
11     <body>
12         <style type="text/css">
13             *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} .demo{margin:100px
14             auto 0 auto;width:400px;text-align:center;font-size:18px;} .demo .action{color:#3366cc;text-decoration:none;font-family:"微软雅黑","宋体";}
15             .overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;_padding:0
16             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;}
17             *html,*html body{background-image:url(about:blank);background-attachment:fixed;}
18             *html .showbox,*html .overlay{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
19             #AjaxLoading{border:1px solid #8CBEDA;color:#37a;font-size:12px;font-weight:bold;}
20             #AjaxLoading div.loadingWord{width:180px;height:50px;line-height:50px;border:2px
21             solid #D6E7F2;background:#fff;} #AjaxLoading img{margin:10px 15px;float:left;display:inline;}
22         </style>
23         <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js">
24         </script>
25         <script type="text/javascript">
26             $(document).ready(function() {
27 
28                 var h = $(document).height();
29                 $(".overlay").css({
30                     "height": h
31                 });
32 
33                 $(".action").click(function() {
34 
35                     $(".overlay").css({
36                         'display': 'block',
37                         'opacity': '0.8'
38                     });
39 
40                     $(".showbox").stop(true).animate({
41                         'margin-top': '300px',
42                         'opacity': '1'
43                     },
44                     200);
45 
46                     setTimeout(function() {
47 
48                         $(".showbox").stop(true).animate({
49                             'margin-top': '250px',
50                             'opacity': '0'
51                         },
52                         400);
53 
54                         $(".overlay").css({
55                             'display': 'none',
56                             'opacity': '0'
57                         });
58 
59                     },
60                     800);
61 
62                 });
63 
64             });
65         </script>
66         <div class="demo">
67             <a class="action" href="javascript:void(0);">
68                 jquery float浮动层弹出层页面加载特效
69             </a>
70         </div>
71         <div class="overlay">
72         </div>
73         <div id="AjaxLoading" class="showbox">
74             <div class="loadingWord">
75                 <img src="waiting.gif">
76                 加载中，请稍候...
77             </div>
78         </div>
79         <div style="height:1200px;">
80         </div>
81     </body>
82 
83 </html>