jquery loading效果

最新推荐文章于 2022-06-28 11:42:45 发布

最新推荐文章于 2022-06-28 11:42:45 发布 · 185 阅读

文章标签：

#jQuery #JavaScript #SVN #Ajax #.net #ViewUI

jquery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的页面加载时显示遮罩效果的方法，并提供了完整的代码示例。该方法能在页面加载完成后自动移除遮罩。

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

效果图见附件

	<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