点击更换背景图片
需要素材点击图片联系我或私信、评论
效果图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>点击更换背景图片</title>
<script>
onload = function (){
var oL1 = document.getElementById("l1");
var oL2 = document.getElementById("l2");
var oL3 = document.getElementById("l3");
var oL4 = document.getElementById("l4");
oL1.onclick = function () {
document.body.style.background = "url(img/big1.jpg)";
document.body.style.backgroundSize = "cover";
}
oL2.onclick = function () {
document.body.style.background = "url(img/big2.jpg)";
document.body.style.backgroundSize = "cover";
}
oL3.onclick = function () {
document.body.style.background = "url(img/big3.jpg)";
document.body.style.backgroundSize = "cover";
}
oL4.onclick = function () {
document.body.style.background = "url(img/big4.jpg)";
document.body.style.backgroundSize = "cover";
}
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 100%;
height: 200px;
background-color: rgba(171,205,239,0.3);
margin: 0 auto;
}
#imagegallery {
list-style: none;
padding-left: 270px;
}
#imagegallery li {
float: left;
margin: 40px 20px 20px 0px;
display: inline;
}
</style>
</head>
<body>
<div id="box">
<ul id="imagegallery">
<li class="l1" id="l1">
<img src="img/small1.jpg" alt="img1"/>
</li>
<li class="l2" id="l2">
<img src="img/small2.jpg" alt="img2"/>
</li>
<li class="l3" id="l3">
<img src="img/small3.jpg" alt="img3"/>
</li>
<li class="l4" id="l4">
<img src="img/small4.jpg" alt="img4"/>
</li>
</ul>
</div>
</body>
</html>