html<div class="bg">
<div class="small1"></div>
<div class="small2"></div>
<div class="small3"></div>
<div class="big1"></div>
<div class="big2"></div>
<div class="big3"></div>
</div>csshtml,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.bg {
background-color: coral;
width: 100%;
height: 100%;
background-image: url(img/001.png);
background-size: 100% 100%;
position: relative;
}
[class^="small"] {
width: 166px;
height: 111px;
float: left;
margin-left: 30px;
margin-top: 40px;
}
[class^="small"]:nth-child(1) {
background-image: url(img/1.png);
}
[class^="small"]:nth-child(2) {
background-image: url(img/2.png);
}
[class^="small"]:nth-child(3) {
background-image: url(img/3.png);
}
[class^="big"] {
width: 919px;
height: 614px;
/*border: 1px solid #ddd;*/
position: absolute;
background-size: 100% 100%;
right: 30px;
top: 50px;
display: none;
}
[class^="big"]:nth-child(1) {
background: url(img/11.png);
}
.big2 {
background: url(img/22.png);
}
.big3 {
background: url(img/33.png);
}js$(document).ready(function() {
$(".small1").bind("click", function() {
$('[class^="big"]').hide()
$(".big1").fadeIn()
})
$(".small2").bind("click", function() {
$('[class^="big"]').hide()
$(".big2").fadeIn()
})
$(".small3").bind("click", function() {
$('[class^="big"]').hide()
$(".big3").fadeIn()
})
})
添加回答
举报
0/150
提交
取消