效果图如下
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-image: url(./image/lushan.jpeg);
background-repeat: no-repeat;
background-size: 100%;
}
.box{
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.box_little{
width: 120px;
height: 30px;
border: 1px solid cornflowerblue;
border-radius: 3px;
background-color: aliceblue;
padding-top: 3px;
cursor: pointer;
}
.gekai{
width: 113px;
height: 8px;
border: 1px solid aliceblue;
background-color: aliceblue;
}
.img_box{
width: 1000px;
height: 500px;
background-image: url("./image/lushan.jpeg");
position: absolute;
bottom: 30px;
border: 20px solid aliceblue;
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
background-size: cover;
border-radius: 6px;
}
</style>
<script src="./jquery-3.6.3.js"></script>
</head>
<body>
<div class="box">
<div class="box_little" id="lushan"><a>庐山</a></div><div class="gekai"></div>
<div class="box_little" id="taishan"><a>泰山</a></div><div class="gekai"></div>
<div class="box_little" id="wugoshan"><a>武功山</a></div><div class="gekai"></div>
<div class="box_little" id="hengshan"><a>衡山</a></div><div class="gekai"></div>
<div class="box_little" id="huashan"><a>华山</a></div><div class="gekai"></div>
<div class="box_little" id="henshan"><a>恒山</a>
</div>
<div class="img_box">
</div>
<script>
$(document).ready(function(){
$("#lushan").click(function(){
$(".img_box").css("background-image", "url('./image/lushan.jpeg')");
$("body").css("background-image","url('./image/lushan.jpeg')");
});
$("#taishan").click(function(){
$(".img_box").css("background-image","url('./image/taishan.jpeg')");
$("body").css("background-image","url('./image/taishan.jpeg')");
});
$("#wugoshan").click(function(){
$(".img_box").css("background-image","url('./image/wugoshan.jpeg')");
$("body").css("background-image","url('./image/wugoshan.jpeg')");
});
$("#hengshan").click(function(){
$(".img_box").css("background-image","url('./image/hengshan.jpeg')");
$("body").css("background-image","url('./image/hengshan.jpeg')");
});
$("#huashan").click(function(){
$(".img_box").css("background-image","url('./image/huashan.jpeg')");
$("body").css("background-image","url('./image/huashan.jpeg')");
});
$("#henshan").click(function(){
$(".img_box").css("background-image","url('./image/henshan.jpeg')");
$("body").css("background-image","url('./image/henshan.jpeg')");
});
});
</script>
</body>
</html>
评论 (0)