百度换肤:点击某个图片,设置该图片为背景图。
//css代码
* {
margin: 0;
padding: 0;
}
body {
background: url(../Picture/图片1.png) no-repeat center top;
}
li {
list-style: none;
}
.baidu {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li {
float:left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
width: 100px;
}
//html代码
<ul class="baidu">
<li><img src="../图片/图片1.png" alt=""></li>
<li><img src="../图片/图片2.png" alt=""></li>
<li><img src="../图片/图片3.png" alt=""></li>
<li><img src="../图片/图片4.png" alt=""></li>
</ul>
//js代码
//1.获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img')
//2.循环注册事件
for(var i=0;i<imgs.length;i++){
imgs[i].onclick = function() {
// 把路径 this.src 给 body
document.body.style.backgroundImage = 'url(' + this.src + ')'
}
}
获取元素
:获取的是 ul标签
下的所有img循环遍历
:遍历所有 img
, 利用数组的形式 , 绑定函数 , 点击显示该背景注意
: 图片地址的拼接形式为 'url(' + this.src + ')'
寄语: 不积跬步,无以至千里;不积小流,无以成江海。