利用JavaScript制作一个点击图片缩略图切换网页背景的案例
style 代码
* {
margin: 0;
padding: 0;
}
body {
background: url(1.jpg) 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.jpg" ></li>
<li><img src="2.jpg" ></li>
<li><img src="3.jpg" ></li>
<li><img src="4.jpg" ></li>
</ul>srcipt代码
var imgs = document.querySelector('.baidu').querySelectorAll('img');
for(var i = 0; i<imgs.length; i++) {
imgs[i].onclick = function() {
console.log(this.scr);
document.body.style.backgroundImage = 'url('+ this.src +')';
}
}最终效果：
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
