1、新建一个web项目,index.jsp同级目录下放jquery插件和top_right.png图片
2、index.jsp页面代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
function posi(){
$("#top_right").removeClass("t_r_0");
$("#top_right").addClass("t_r_4");
}
function poso(){
$("#top_right").removeClass("t_r_4");
$("#top_right").addClass("t_r_0");
}
function closetop_right(){
$("#top_right").hide();
}
</script>
<style type="text/css">
#top_right{
width:248px; display:block;
position:absolute;; right:0;top:0;
background-image:url(top_right.png);
background-repeat:no-repeat;
}
.top_righttrue{
width:80px;
height:50px;
position:absolute;
right:0;
top:0;
cursor:pointer;
display:block;
}
.top_rightfalse{
width:30px;
height:30px;
position:absolute;
right:50px;
top:50px;
cursor:pointer;
display:block;
}
.t_r_0{background-position:right 0;height:41px;}
.t_r_1{background-position:right -100px;height:70px;}
.t_r_2{background-position:right -200px;height:80px;}
.t_r_3{background-position:right -300px;height:90px;}
.t_r_4{background-position:right -400px;height:130px;}
.t_r_5{background-position:right -550px;height:150px;}
.t_r_6{background-position:right -700px;height:150px;}
</style>
</head>
<body>
<div class="t_r_0" id="top_right" href="" title="" target="_blank" οnmοuseοver="posi()" οnmοuseοut="poso()">
<a class="top_righttrue" title="换皮肤" οnclick="showpf()"></a>
<a class="top_rightfalse" title="关闭" οnclick="closetop_right()"></a>
</div>
</body>
</html>
3、效果