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

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  2. php函数每日学习二十个

    数学函数 1,abs() 求绝对值 2,ceil() 进一法取整 3,floor() 舍去法取整 4,fmod()对浮点数进行取余 例如fmod(5.7,1.3) 5,pow() 返回数的n次方 po ...

  3. 详解Java动态代理机制（二）----cglib实现动态代理

    上篇文章的结尾我们介绍了普通的jdk实现动态代理的主要不足在于:它只能代理实现了接口的类,如果一个类没有继承于任何的接口,那么就不能代理该类,原因是我们动态生成的所有代理类都必须继承Proxy这个类, ...

  4. Elasticsearch5中安装Elasticsearch-head插件

    介绍 elasticsearch-head是一个用于管理Elasticsearch的web前端插件,搞过ES的同学应该都了解.该插件在es5中可以以独立服务的形式进行安装使用.本文将介绍如何操作. 相 ...

  5. [刷题]算法竞赛入门经典 3-10/UVa1587 3-11/UVa1588

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 题目:算法竞赛入门经典 3-10/UVa1587:Box 代码: //UVa1587 - Box #include&l ...

  6. 最新的chart 聊天功能（ webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7）

    请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...

  7. C#中对于变量的声明和初始化

    C#变量初始化是C#强调安全性的另一个例子.简单地说,C#编译器需要用某个初始值对变量进行初始化,之后才能在操作中引用该变量.大多数现代编译器把没有初始化标记为警告,但C#编译器把它当作错误来看待. ...

  8. Linux五种IO模型性能分析

    1. 概念理解 在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式: 同步:       所谓同步,就是在发出一个功能调用时, ...

  9. Java中线程的使用 (2)-多线程、线程优先级、线程睡眠、让步、阻塞

    Java中线程的使用 (2)-多线程.线程优先级.线程睡眠.让步.阻塞 (一)多线程使用方法 说明:创建每个新的线程,一定要记得启动每个新的线程(调用.start()方法) class Xc3 ext ...

  10. Spring+SpringMVC+MyBatis深入学习及搭建(三)——MyBatis全局配置文件解析

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6874672.html 前面有写到Spring+SpringMVC+MyBatis深入学习及搭建(二)——My ...