您的位置：首页 > Web前端 > JQuery

jquery遮罩效果

2013-12-17 16:13 211 查看
1

<!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.csdn.net/detail/li53957105/4489460
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航