百度背景换肤
<style>
* {
margin: 0;
padding: 0;
}
ul {
margin-top: 100px;
text-align: center;
}
li {
list-style: none;
float: left;
}
img {
width: 200px;
vertical-align: middle;
}
body {
background-image: url(img/1_1.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
</style>
<body>
<ul>
<li>
<img src="img/1_1.jpg" alt="">
</li>
<li>
<img src="img/1_2.jpg" alt="">
</li>
<li>
<img src="img/1_3.jpg" alt="">
</li>
<li>
<img src="img/1_4.jpg" alt="">
</li>
</ul>
<script>
var imgs = document.querySelectorAll('img');
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
// document.body.style.backgroundImage = url('img/1_4.jpg');
var src = this.src;
//这样的话，src就成字符串了，而不是变量
//document.body.style.backgroundImage = 'url("src")';
document.body.style.backgroundImage = 'url(' + src + ')';
}
}
</script>
</body>
