JavaWeb开发切换皮肤技术

最新推荐文章于 2025-05-30 14:11:16 发布

原创最新推荐文章于 2025-05-30 14:11:16 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

java 专栏收录该内容

47 篇文章

订阅专栏

本文介绍了JavaWeb开发中如何实现动态切换皮肤功能的技术，包括使用CSS层叠样式表、JavaScript事件监听以及存储用户选择的皮肤到浏览器sessionStorage中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">


<title>JavaWeb开发切换皮肤技术</title>
<meta name="Keywords" content="关键词,关键字">
<meta name="description" content="">




<style type="text/css">
*{margin:0;padding:0;}
//默认值
body{/*background:url("images/1.jpg");*/}
img{border:0;display:block;margin:0 1px 1px 0;}
/*以.开头的css样式称之为类样式*/
.skin{width:100%;height:200px;background:#fff;padding-top:20px;/*display:none*/;
position:absolute;top:0;left:0;
z-index:2;
display:none;
}
.skin .pic{width:590px;height:180px;/*border:1px solid red;*/margin:0 auto;}
.skin .pic .one{width:196px;height:180px;/*border:1px solid green;*/float:left;}
.skin .pic .one a{float:left;}

.skin .pic .two{width:97px;float:left;}
.skin .pic .three{width:196px;float:left;margin-left:1px;}
.skin .pic .three a{float:left;}
.skin .pic .four{width:97px;float:left;}

.skin .pic a:hover img{opacity:0.7;filter:alpha(opacity=70);}/*选中后有阴影*/

.overlay{width:100%;height:100%;background:#000;position:absolute;top:0;left:0;
/*兼容所有浏览器的透明度*/
filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;
z-index:1;
display:none;
}

</style>

</head>
<body>

<a href="#" id="choose">切换皮肤</a>



<div class="skin">
<div class="pic">
<div class="one">
<a href="#">

<img src="images/2.jpg" alt="壁纸1" width="195" height="115" />
</a>
<a href="#"><img src="images/3.jpg" alt="壁纸" width="97" height="59"/></a>
<a href="#"><img src="images/4.jpg" alt="壁纸" width="97" height="59"/></a>
</div>
<div class="two">
<a href="#"><img src="images/5.jpg" alt="壁纸1" width="97" height="59" /></a>
<a href="#"><img src="images/6.jpg" alt="壁纸" width="97" height="59"/></a>
<a href="#"><img src="images/7.jpg" alt="壁纸" width="97" height="59"/></a>
</div>
<div class="three">
<a href="#"><img src="images/8.jpg" alt="壁纸1" width="97" height="59" /></a>
<a href="#"><img src="images/9.jpg" alt="壁纸" width="97" height="59"/></a>
<a href="#"><img src="images/10.jpg" alt="壁纸" width="195" height="115"/></a>
</div>
<div class="four">
<a href="#"><img src="images/11.jpg" alt="壁纸1" width="97" height="59" /></a>
<a href="#"><img src="images/12.jpg" alt="壁纸" width="97" height="59"/></a>
<a href="#"><img src="images/13.jpg" alt="壁纸" width="97" height="59"/></a>
</div>
</div>
</div>

<div class="overlay"></div>


<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function(){ /*javascript的入口函数*/
//alert("Hello！晚上好!");
$("#choose").click(function(){
$(".skin,.overlay").toggle("slow");
});

$(".overlay").click(function(){
$(".skin,.overlay").toggle("slow");
});

//切换皮肤
//第一种方法
//$(".skin").find("a").click(function(){
//alert("Hello,Good Evening！晚上好,!");
// var src=$(this).find("img").attr("src");/*.replace(/-\d*ig,'')*/
//alert(src);
// $("body").css("background","url("+src+")");

//});

//第二种方法，需要记忆功能
$(".skin").find("a").click(function(){
var src=$(this).find("img").attr("src");/*.replace(/-\d*ig,'')*/
$("body").css("background","url("+src+")");
//存储图片地址到浏览器的sessionStorage里边
sessionStorage.setItem("src",src);
});

//获取浏览器sessionStorage的值
var sessionSrc=sessionStorage.getItem("src");
if(sessionSrc){//如果sessionSrc不等于空
$("body").css("background","url("+sessionSrc+")");
}

});
</script>

</body>
</html>