效果：通过按键弹出备选皮肤，点击选择样式后，更换成功。

思路：先是布局上我们需要定位，所以为了避免背景把换肤按钮给盖住，需要把按钮的标签放到大背景div的下面，并列结构。假如倒置了可以加层级让其显示。

代码如下：

<!DOCTYPE html>

<html>

<head>

<title>换肤</title>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<link href=”list.css” rel=”stylesheet” type=”text/css”/>

<link href=”reset.css” rel=”stylesheet” type=”text/css”/>

<style type=”text/css”>

html,body{

100%;height:100%;

}

p{

100%;

height: 50px;

background: #000;

color:#fff;

font-size: 30px;

line-height: 50px;

text-align: center;

position:absolute;

top:0;

left: 0;

cursor: pointer;

}

body{

100%;

height:100%;

background: url(“img/1.jpg”) no-repeat;background-size: 100% 100%;

position:relative;

}

div{

100%;

height:100%;

opacity: 0.7;

background: #000;

display: none;

}

ul{

800px;height:400px;position:absolute;left:50%;top:50%;margin-left: -400px;margin-top: -200px;display: none;

}

li{

198px;height:198px;border:1px solid #ccc;float: left;

}

li>img{

100%;height:100%;

}

</style>

</head>

<body>

<div></div>

<p>换肤请点我</p>

<ul>

<li> <img src=”img/1.jpg” alt=””/></li>

<li> <img src=”img/2.jpg” alt=””/></li>

<li> <img src=”img/3.jpg” alt=””/></li>

<li> <img src=”img/4.jpg” alt=””/></li>

<li> <img src=”img/5.jpg” alt=””/></li>

<li> <img src=”img/6.jpg” alt=””/></li>

<li> <img src=”img/7.jpg” alt=””/></li>

<li> <img src=”img/8.jpg” alt=””/></li>

</ul>

<script src=”jquery.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(“p”).click(function () {

$(“p”).slideUp();

$(“div,ul”).show();

});

$(“div”).click(function () {

$(“p”).slideDown();

$(“div,ul”).hide();

});

$(“ul li img”).click(function(){

var src=$(this).attr(“src”);

$(“body”).css({“background-image”:”url(“+src+”)”});

});

</script>

</body>

</html>