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>
JQuery浮动层Loading页面加载特效的更多相关文章
- 一款由jquery实现的超炫的页面加载特效
今天为大家带来一款由jquery实现的超炫的页面加载特效.连续的几个页面分开特效.最后由三维的线条由远至近消失,然后由近至远出现.效果超级梦炫.一起看下效果图: 在线预览 源码下载 实现的代码. ...
- JQuery的几种页面加载完执行三种方式
jquery加载页面的方法(页面加载完成就执行) 1. $(function(){ $("#a").click(function(){ //adding your code h ...
- 从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- jQuery Mobile中的页面加载与跳转机制
第一次做用jQuery Mobile做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...
- jquery实现移动端页面加载后,向上滚动指定距离无效引起的探索
效果如下,页面加载完后向上滚动一段距离 最近一同事询问用jquery为何无法实现上面效果,查看代码后发现代码并没写错, 也正确引入了zepto.js,也不是版本问题(因为是移动端项目,出于性能和需 ...
- loading(正在加载特效)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 前端开发入门到进阶第三集【js和jquery的执行时间与页面加载的关系】
https://blog.csdn.net/u014179029/article/details/81603561 [原文链接]:https://www.cnblogs.com/eric-qin/p/ ...
- 页面加载和图片加载loading
准备放假了!也是闲着了 ,就来整理之前学到或用到的一下知识点和使用内容,这次记录的是关于加载的友好性loading!!!这里记录一下两种加载方法 1.页面加载的方法,它需要用到js里面两个方法 doc ...
- fakeLoader页面加载前loading演示8种效果
提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...
随机推荐
- [内存管理]连续内存分配器(CMA)概述
作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. 原文地址:http://lwn.net/Articles/396657/ 1 ...
- JQuery hover鼠标变换
一般而言,我们为非按钮.链接等元素添加hover事件时,虽然能够处理悬停事件,但是鼠标却并没有变化,会造成悬停事件不明显的结果,为此,我们可以添加CSS样式cursor:pointer,使得该元素的悬 ...
- vue的Virtual Dom实现- snabbdom解密
vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使 ...
- WebView加载页面的两种方式——网络页面和本地页面
WebView加载页面的两种方式 一.加载网络页面 加载网络页面,是最简单的一种方式,只需要传入http的URL就可以,实现WebView加载网络页面 代码如下图: 二.加载本地页面 1.加载asse ...
- selenium 利用testNG对异常进行自动截图
哈哈哈,很久没写博客了,懒了. 因为一些原因最近需要把监听事件重新整理一下,开始没细想,直接copy网上的,其实结果发现报错很多,或者是达不到效果,然后把之前的代码翻出来,仔细看了一下.下面给一些需要 ...
- 面向对象设计(Object-Oriented Design,OOD)
前言 OOD简介 Shubho:亲爱的,让我们开始学习OOD吧.你了解面向对象原则吗? Farhana:你是说封装,继承,多态对吗?我知道的. Shubho:好,我希望你已了解如何使用类和对象.今天我 ...
- 【树莓派】为树莓派配置或扩展swap分区
---恢复内容开始--- 由于树莓派3的默认内存只有1G,而应用程序运行过程中,存在大量的IO读写,以及网络转换,内存交换等.这样,也有很多buffer.cache资源占用等,很快就会接近1GB,最终 ...
- jdbc(2)
create table account ( id int primary key auto_increment, name varchar(20), money double);insert int ...
- 2017最新修复福运来完整运营中时时彩源码PC+手机版本功能齐全
QQ:1395239152 2017-3.14最新修复福运来完整运营版时时彩源码PC+手机版本功能齐全 使用php+mysql开发,并带有完整数据库.截图!!! 注意哈 带手机版 以下截图均为测 ...
- Struts2 Handle 404 error page and wrong action
1. To handle 404 not found yourself, just add this code to your web.xml <error-page> <error ...