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

JQuery浮动层Loading页面加载特效的更多相关文章

  1. 一款由jquery实现的超炫的页面加载特效

    今天为大家带来一款由jquery实现的超炫的页面加载特效.连续的几个页面分开特效.最后由三维的线条由远至近消失,然后由近至远出现.效果超级梦炫.一起看下效果图: 在线预览   源码下载 实现的代码. ...

  2. JQuery的几种页面加载完执行三种方式

      jquery加载页面的方法(页面加载完成就执行) 1. $(function(){ $("#a").click(function(){ //adding your code h ...

  3. 从零开始学 Web 之 jQuery（一）jQuery的概念，页面加载事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. jQuery Mobile中的页面加载与跳转机制

    第一次做用jQuery Mobile做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...

  5. jquery实现移动端页面加载后，向上滚动指定距离无效引起的探索

    效果如下,页面加载完后向上滚动一段距离 最近一同事询问用jquery为何无法实现上面效果,查看代码后发现代码并没写错,   也正确引入了zepto.js,也不是版本问题(因为是移动端项目,出于性能和需 ...

  6. loading(正在加载特效)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. 前端开发入门到进阶第三集【js和jquery的执行时间与页面加载的关系】

    https://blog.csdn.net/u014179029/article/details/81603561 [原文链接]:https://www.cnblogs.com/eric-qin/p/ ...

  8. 页面加载和图片加载loading

    准备放假了!也是闲着了 ,就来整理之前学到或用到的一下知识点和使用内容,这次记录的是关于加载的友好性loading!!!这里记录一下两种加载方法 1.页面加载的方法,它需要用到js里面两个方法 doc ...

  9. fakeLoader页面加载前loading演示8种效果

    提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...

随机推荐

  1. java 无法连接ftp服务器（500 OOPS: cannot change directory）

    在使用java连接ftp服务器时可能会出现无法连接的情况,检查代码是没有错误的,这时就应该考虑一下服务器端的情况了: 首先用在本地打开命令窗口,输入:ftp ftp服务器IP,窗口会提示你输入用户名密 ...

  2. 浅谈JavaScript时间与正则表达式

    时间函数:var box = new Date() 函数       Demo:         alert(Date.parse('4/12/2007'));    //返回的是一个毫秒数11763 ...

  3. IOS中的JSON数据的解析

    解析Json数据 //加载.json文件 NSString *path = [[NSBundle mainBundle]pathForResource:@"product.json" ...

  4. Ajax与Pjax请求在服务端是如何识别的

    我在后台处理ajax和一般的网页请求时,一般是需要额外加个参数进行区分的.比如使用get参数的is_ajax=1,后台判断有is_ajax=1成立时,表明该请求是ajax请求,遂可区分处理.我正在使用 ...

  5. poj1797 Heavy Transportation Dijkstra算法的简单应用

    题目链接:http://poj.org/problem?id=1797 题目就是求所有可达路径的其中的最小值边权的最大值 即对于每一条能够到达的路径,其必然有其最小的承载(其实也就是他们自身的最大的承 ...

  6. JS执行效率与性能提升方案

    如果是追加字符串,最好使用s+=anotherStr操作,而不是要使用s=s+anotherStr.如果要连接多个字符串,应该少使用+=,如 s+=a;s+=b;s+=c;应该写成s+=a + b + ...

  7. 《Android进阶》之第三篇 深入理解android的消息处理机制

    Android 异步消息处理机制 让你深入理解 Looper.Handler.Message三者关系 android的消息处理机制(图+源码分析)——Looper,Handler,Message an ...

  8. Calendar使用

    1简单例子 package com.kungeek.tip; import java.text.SimpleDateFormat; import java.util.Calendar; import ...

  9. Webdriver+Java实现使用cookie跳过登录

    Webdriver+Java实现使用cookie跳过登录   Webdriver模拟登录过程中很有可能遇到验证码,最近认真学习了下如何使用cookie直接跳过登录过程. 一.cookie的定义 来源百 ...

  10. VR全景智慧城市—城市就在你眼前

    "春风十里,不如有你",不知不觉间,身边的人已对VR不再陌生,VR眼镜的热销,VR体验店的火爆,VR游戏的向往等等.可见VR就是为生活而诞生! 2015年被称作VR行业的产业元年, ...