仿360网站广告实现换肤特效



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" onmouseover="posi()" onmouseout="poso()">
		<a class="top_righttrue" title="换皮肤" onclick="showpf()"></a>
		<a class="top_rightfalse" title="关闭" onclick="closetop_right()"></a>
		</div>

</body>
</html>

3、效果


 

posted @ 2016-09-20 22:38  海的心  阅读(218)  评论(0)    收藏  举报