`

jquery loading效果

阅读更多

   说明:用户登录系统后,系统一些资源还在加载 (即,没有加载完,无法正常相应用户的操作) 这时我想弄个遮罩效果,当加载完后遮罩消失。

   效果图见附件

	<script type='text/javascript' src='<%=basePath %>js/jquery-1.2.6.min.js'></script>
	<script type="text/javascript">
	<!-- 
		jQuery(function(){
			jQuery('#loading-one').empty().append('页面载入完毕.').parent().fadeOut('slow');
		});
	//-->
	</script>
 
 	<div id="loading" style="position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(http://interjc.googlecode.com/svn/trunk/waterfall/img/load.gif) no-repeat center center; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;" onclick="javascript:turnoff('loading')">
		<p id="loading-one" style="color:#fff;position:absolute; top:50%; left:50%; margin:20px 0 0 -50px; padding:3px 10px;" onclick="javascript:turnoff('loading')">页面载入中..</p>
	</div>
	<script type="text/javascript">
	//<![CDATA[
	  function turnoff(obj){
	    document.getElementById(obj).style.display="none";
	  }
	//]]>
	</script>

 转自: http://www.vi-c.net.cn/jquery-loadingpage.html

  • 大小: 7.2 KB
分享到:
评论
2 楼 wafj999 2010-06-14  
我需要做的是在同一个页面加载ajax的时候显示这个层完成后隐藏这个遮罩 不知道怎么修改呢?
1 楼 rainingcn 2010-05-14  
ff 下没效果

相关推荐

    shCircleLoader – jQuery Loading效果插件

    shCircleLoader 是一个基于 jQuery 的插件,它能够很方便快速的制作 Loading 效果。该 Loading 效果由多个 div 组成,没有任何图片。shCircleLoader 还提供了众多属性,你可以根据这些属性自定义出各种各样的 ...

    jquery loading(遮罩)插件

    jQuery Loading插件用于当DOM元素加载或变化期间,对其进行遮挡阻止用户操作并告知有些后台任务还在进行。实现“正在加载中…”的效果。整个插件只有1kb左右。效果跟extjs遮罩(锁屏)效果基本一样。

    jQuery Loading页面加载动画效果代码.zip

    "jQuery Loading页面加载动画效果代码.zip" 包含的资源正是为了实现这一目标,它提供了一种通过jQuery库创建的动态加载效果,尤其是采用了读取进度条的特效。 jQuery是一个广泛使用的JavaScript库,它简化了HTML...

    一个适合做页面 “加载中” 效果的插件 jquery-loading

    "jquery-loading"是一个专为实现这种效果设计的jQuery插件,它提供了一种简单而实用的方式来显示页面加载的状态,避免用户在等待过程中感到不耐烦。 首先,我们来了解一下jQuery。jQuery是一个快速、简洁的...

    jQuery loading加载动画特效

    在"jQuery loading加载动画特效"中,我们主要探讨的是如何利用jQuery来实现页面加载时的动态效果,提升用户体验。 一、jQuery基本概念 jQuery是由John Resig在2006年创建的,它的核心理念是"Write Less, Do More"。...

    前端项目-jquery-loading-overlay.zip

    "前端项目-jquery-loading-overlay"就是这样一个专门用于创建灵活加载覆盖层的jQuery插件,它可以帮助我们轻松地为网页添加动态加载效果。 首先,jQuery Loading Overlay插件的核心功能是创建一个覆盖整个页面或者...

    jquery Loading图片延迟加载特效.zip

    描述提到,“jquery Loading图片延迟加载是一款滚动页面图片延迟加载效果”,这意味着当用户滚动页面,只有当图片进入可视区域时,才会开始加载对应的图片资源。这种机制可以显著降低首屏加载时间,尤其适用于含有...

    jquery loading 图片

    在前端页面设计与开发中,"jQuery Loading 图片"是一个重要的元素,特别是在用户交互和数据加载过程中,它能提供良好的用户体验,告知用户系统正在进行后台处理。这篇文章将深入探讨jQuery加载图片的实现方式、应用...

    jquery loading遮罩层插件

    在busy-load插件中,jQuery提供了一个简洁的API,使得开发者能够快速地在网页中添加遮罩层和loading效果。通过引入jQuery库,我们可以利用其强大的选择器功能选取需要添加遮罩层的元素,并应用插件的各种配置。 **...

    jquery loading

    在"jquery loading"这个主题中,我们主要关注的是如何使用jQuery来实现页面加载等待效果,这在用户进行数据交互或者页面内容动态加载时非常常见。 首先,`loading.css`是用于定义加载等待效果样式的CSS文件。在这个...

    jQuery制作Loading动画特效.zip

    在制作Loading动画时,我们可以利用jQuery的动画API来创建动态效果。 1. **基础准备**: 在开始制作之前,确保已经在页面中引入了jQuery库。可以通过CDN链接或本地文件引入,例如: ```html ...

    jQuery Loading页面加载动画效果代码.rar

    "jQuery Loading 页面加载动画效果代码"就是一个专为此目的设计的资源,它结合了JavaScript库jQuery的高效性和视觉吸引力,为用户提供了一种酷炫且实用的加载体验。 jQuery是一个轻量级的JavaScript库,它的出现极...

    jQuery演示9种不同的loading效果

    在本文中,我们将深入探讨如何使用jQuery来实现9种不同的加载(loading)效果。jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。加载效果通常在页面内容正在加载或者用户等待...

    jquery+CSS3按钮加载loading动画效果

    今天我们将探讨如何利用jQuery和CSS3技术实现按钮加载loading动画效果,让用户的等待过程更加有趣且不显枯燥。 首先,jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理以及AJAX交互。在我们的场景中...

    jquery loading插件

    jQuery Loading 插件是网页加载效果的一个强大工具,它能够为网页或特定元素提供美观的加载动画,提高用户体验,尤其在页面数据异步加载或等待过程中。这些插件通常使用JavaScript库jQuery作为基础,结合CSS3动画...

    jQuery.spin.js自定义页面加载Loading动画代码

    jQuery.spin.js就是一个这样的插件,它允许开发者自定义页面加载的Loading动画效果,提供了一种优雅的方式来提升用户体验。 jQuery是一个广泛使用的JavaScript库,它的易用性和丰富的功能使其成为网页开发的首选...

    jquery页面加载效果

    "jQuery页面加载效果"是指利用JavaScript库jQuery实现的动态加载动画,它能够以吸引人的视觉方式展示网页内容正在加载的过程,使用户在等待期间不会感到乏味。这种效果在现代网页设计中被广泛应用,尤其在内容分块...

    jQuery自定义Loading动画插件spin.js

    Spin.js就是这样一个专为jQuery设计的自定义Loading动画插件,它允许开发者根据需求创建各种动态效果。 Spin.js的主要特点包括: 1. **高度可定制**:通过 Spin.js,开发者可以自定义旋转动画的多个参数,如线条...

    jQuery SVG实现Loading加载按钮动画图标特效.zip

    &lt;button class="loading-button circular-loading top"&gt;Send &lt;button class="control-button bordered make-it-succeed"&gt;Make it succeed &lt;div class="loading-options"&gt; &lt;h2&gt;Loaders &lt;input type=...

Global site tag (gtag.js) - Google Analytics