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、效果
