【HTML】实现背景切换
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景换肤</title>
<style>
body {
/* margin-top: 50px; */
position: relative;
display: flex;
justify-content: center;
background: url(http://pic.netbian.com/uploads/allimg/170610/174855-1497088135bff2.jpg) no-repeat center top;
background-size: 100%;
}
.pifu {
width: 60%;
position: fixed;
bottom: 40px;
margin: 0px;
padding: 0px;
list-style: none;
/* margin-left: 25%; */
}
.pifu li {
width: 25%;
/* height: 100px; */
border: 2px solid rgba(255, 255, 255, 0);
border-radius: 5px;
overflow: hidden;
float: left;
transition: 0.5s;
box-sizing: border-box;
/* height: 100px; */
}
.pifu li:hover {
transform: scale(1.1);
}
.pifu::after {
/* overflow: hidden; */
content: '';
display: block;
clear: both;
}
.pifu li img {
display: block;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<ul class="pifu">
<li><img src="http://pic.netbian.com/uploads/allimg/170610/174855-1497088135bff2.jpg" alt=""></li>
<li><img src="http://pic.netbian.com/uploads/allimg/180726/192524-153260432471a0.jpg" alt=""></li>
<li><img src="http://pic.netbian.com/uploads/allimg/180709/175550-15311301507dba.jpg" alt=""></li>
<li><img src="http://pic.netbian.com/uploads/allimg/170610/214826-14971025069c01.jpg" alt=""></li>
</ul>
<script>
var img = document.querySelector('.pifu').querySelectorAll('img');
for (i = 0; i < img.length; i++) {
img.onmouseover = function() {
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
img.onclick = function() {
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
</html>
页:
[1]