jquery遮罩效果

最新推荐文章于 2025-03-16 13:57:47 发布

原创最新推荐文章于 2025-03-16 13:57:47 发布 · 982 阅读

0 ·

CC 4.0 BY-SA版权

Jquery 专栏收录该内容

96 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery showLoading example</title>
<link href="css/showLoading.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.showLoading.js"></script>
<style type="text/css">
a {
	color: blue;
	cursor: pointer;
	text-decoration: underline;
}

div.instructions_container {
	float: left;
	width: 350px;
	margin-right: 50px;
}

div#activity_pane {
	float: left;
	width: 350px;
	height: 200px;
	border: 1px solid #CCCCCC;
	background-color: #EEEEEE;
	padding-top: 200px;
	text-align: center;
}

div.example_links 
         .link_category {
	margin-bottom: 15px;
}

.loading-indicator-bars {
	background-image: url('images/loading-bars.gif');
	width: 150px;
}
</style>
<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('a.loading-ajax').click(
			function() {
				/* $('#activity_pane').showLoading({
					'afterShow' : function() {
						setTimeout("jQuery('#activity_pane').hideLoading()", 1000);
					}
				}); */
				$('#activity_pane').showLoading();
			}
		);
	}
	);
</script>

</head>
<body>
	<div class="link_category">
		<div class="link">
			<a class="loading-ajax">simulate 1-second Ajax load</a>
		</div>
	</div>

	<div id="activity_pane">
		Here is where we will load something via ajax. <br /> This container
		<b>must</b> have an id attribute
	</div>
	<div style="clear: both;"></div>
</body>
</html>

很好理解的

下载的插件路径在

http://download.youkuaiyun.com/detail/li53957105/4489460