之前做项目，经常需要一些浮动层加载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. poj2594最小顶点覆盖+传递闭包

    传递闭包最开始是在Floyd-Warshall算法里面出现的,当时这算法用的很少就被我忽视了.. 传递闭包是指如果i能到达k,并且k能到达j,那么i就能到达j Have you ever read a ...

  2. spring计划任务

    Spring3中加强了注解的使用,其中计划任务也得到了增强,现在创建一个计划任务只需要两步就完成了: 创建一个Java类,添加一个无参无返回值的方法,在方法上用@Scheduled注解修饰一下: 在S ...

  3. Python 与 C/C++ 交互的几种方式

    python作为一门脚本语言,其好处是语法简单,很多东西都已经封装好了,直接拿过来用就行,所以实现同样一个功能,用Python写要比用C/C++代码量会少得多.但是优点也必然也伴随着缺点(这是肯定的, ...

  4. Caffe2 Tutorials[0]

    本系列教程包括9个小节,对应Caffe2官网的前9个教程,第10个教程讲的是在安卓下用SqueezeNet进行物体检测,此处不再翻译.另外由于栏主不关注RNN和LSTM,所以栏主不对剩下两个教程翻译. ...

  5. 使用Spire.Doc组件利用模板导出Word文档

    以前一直是用Office的组件实现Word文档导出,但是让客户在服务器安装Office,涉及到版权:而且Office安装,包括权限配置也是比较麻烦. 现在流行使用第三方组件来实现对Office的操作, ...

  6. 路由-when-resolve

    文件列表:luyou.html,app.js,home.html,user.html,wy.json luyou.html <!DOCTYPE html> <html ng-app= ...

  7. 智能指针剖析（上）std::auto_ptr与boost::scoped_ptr

    1. 引入 C++语言中的动态内存分配没有自动回收机制,动态开辟的空间需要用户自己来维护,在出函数作用域或者程序正常退出前必须释放掉. 即程序员每次 new 出来的内存都要手动 delete,否则会造 ...

  8. vue2.0实践 —— Node + vue 实现移动官网

    简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vu ...

  9. [笔记]A*寻路算法初探

    写在开始之前 最近突然对各路游戏的寻路算法很感兴趣,于是去学习了下游戏里的AI们是如何寻路的.网上相关内容很多,但同时有些说法也不一,制作自己的A* 算法时也有因不同的说法而困惑.整理多方资料并自己实 ...

  10. Centos6.5_x86上Oracle11g2 32位的安装与卸载以及相关问题汇总

    需要注意的问题: 1.Linux包括内核和要安装的oralce版本是否符合(这个在官方文档中有说明). 2.安装oracle一般会新建一个为oracle的账户,注意在安装的过程中的root和oracl ...