前些日子看到一個奇葩的面試題，
讓做一個簡單的主題更換，想了想我也試一試，做一個簡單的皮膚更換！
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #f2f2f2;
}
.all {
width: 800px;
height: 500px;
background: #fff;
margin: 40px auto;
position: relative;
overflow: hidden;
background-image: url(img/isc129387219.jpg);
background-size: 100% 100%;
}
.btn {
width: 60px;
height: 30px;
background: #666;
text-align: center;
line-height: 30px;
color: #C60023;
cursor: pointer;
}
.all_imgs {
width: 440px;
height: 240px;
display: none;
}
.all_imgs span {
width: 40px;
height: 20px;
display: inline-block;
color: #fff;
font-size: 14px;
background: #ccc;
position: absolute;
left: 320px;
top: 320px;
cursor: pointer;
text-align: center;
line-height: 20px;
}
.all_imgs .cancel {
left: 370px;
}
.imgs {
margin: 20px;
width: 400px;
height: 300px;
border: 1px solid royalblue;
background: navajowhite;
}
.imgs img {
width: 180px;
height: 80px;
float: left;
margin: 10px;
}
.imgs img:hover {
opacity: 0.7;
/*transition:linear 0.2s;*/
}
.imgs .active {
border: 1px solid royalblue;
margin: 9px;
}
</style>
</head>
<body>
<div class="all">
<div class="btn">換 膚</div>
<div class="all_imgs">
<div class="imgs">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
</div>
<span class="select_">確定</span>
<span class="cancel">取消</span>
</div>
</div>
</body>
}); (".imgs img").click(function() {
js部分圖片
