1、首先是JSP文件 index.jsp
-
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
-
<html>
-
<head>
-
<link href="global.css" rel="stylesheet" type="text/css" />
-
<script type="text/javascript" src="jquery-1.4.2.js"></script>
-
</head>
-
-
<script type="text/javascript">
-
//显示加载效果
-
function showPopDiv(){
-
$("#loading").css("display","block");
-
$("#popDiv").css("display","block");
-
}
-
//取消加载效果
-
function hiddenPopDiv(){
-
$("#loading").css("display","none");
-
$("#popDiv").css("display","none");
-
}
-
</script>
-
<body>
-
<input type="button" value="显示加载" onclick="showPopDiv();"/>
-
<div id="popDiv"></div>
-
<div id="loading"></div>
-
<input type="button" value="取消加载" onclick="hiddenPopDiv();"/>
-
</body>
-
</html>
2、css文件 global.css
-
#loading{
-
position:fixed;_position:absolute;
-
display: none;
-
top:50%;left:50%;
-
width:124px;height:124px;
-
overflow:hidden;
-
background:url(loaderc.gif) no-repeat;z-index:7;
-
margin:-62px 0 0 -62px;
-
}
-
-
#popDiv{
-
margin-top:50px;
-
display: none;
-
position: absolute;
-
top: 0%;
-
left: 0%;
-
width: 100%; height: 100%;
-
background-color: black;
-
z-index:2; -moz-opacity: 0.7;
-
opacity:.70;
-
filter: alpha(opacity=5);
-
}
3、加载效果图片 loaderc.gif
4、在index.jsp中引入 jquery-1.4.2.js
阅读(3966) | 评论(0) | 转发(0) |
