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

    integer a=new integer(1); integer b=new integer(1); int c=1; integer d=1; a==b  false因为地址不同: a==c  t ...

  2. JavaScript 中有关Array操作的一些函数

    JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素. 要取得Array的长度,直接访问length属性: var arr = [1, 0.222, 'Hi', null, ...

  3. Vue项目的部署

    通过vue-cli创建的工程,默认已经打好了基础,包含vue-loader webpack. 通常我们开发中,使用npm run dev进行开发,webpack会Hot reload,不用我们手动刷新 ...

  4. for循环-0,1,1,2,2可以组成多少个不重复的五位数？

    今天想到了一个比较有意思的for循环题:0,1,1,2,2可以组成多少个不重复的五位数? 它主要是for循环多层嵌套外加if判断,代码如下: protected void Button1_Click( ...

  5. 网站权限管理 之 角（jue）色管理

    公司或网站的正常运行,离不开管理员对各个员工的合理分配,那先看看权限管理中的角色管理好了: 要更改用户的角色,那么先来理一下思路: (1)用户现在是什么角色? (2)用户将要成为什么角色? (3)怎样 ...

  6. Mac电脑如何搭建php环境,并且开发php.

    这篇文章主要介绍了Mac下搭建php开发环境教程,Mac OS X 内置了Apache 和 PHP,这样使用起来非常方便.本文以Mac OS X 10.12.4为例,需要的朋友可以参考下! Mac O ...

  7. 《JAVA与模式》之命令模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述命令(Command)模式的: 命令模式属于对象的行为模式.命令模式又称为行动(Action)模式或交易(Transaction)模式. ...

  8. （中级篇 NettyNIO编解码开发）第六章-编解码技术

    基于Java提供的对象输入/输出流ObjectlnputStream和ObjectOutputStream,可以直接把Java对象作为可存储的字节数组写入文件,也可以传输到网络上.对程序员来说,基于J ...

  9. 开涛spring3(2.3) - IoC的配置使用

    2.3.1  XML配置的结构 一般配置文件结构如下: <beans> <import resource=”resource1.xml”/> <bean id=”bean ...

  10. php中的数组遍历的几种方式

    [(重点)数组循环遍历的四种方式]   1.使用for循环遍历数组     conut($arr);用于统计数组元素的个数.     for循环只能用于遍历,纯索引数组!!!!     如果存在关联数 ...