JQuery浮动层Loading页面加载特效

时间：2023-03-08 17:36:06
JQuery浮动层Loading页面加载特效

之前做项目，经常需要一些浮动层加载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>

相关文章