案例分析
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.baidu {
overflow: hidden;
}
.baidu img {
width: 200px;
}
ul {
list-style-type: none;
}
body {
background-image: url(images/1.jpg);
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<script>
// 1.获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// 2.循环注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
//this.src 就是我们点击图片的路径 images/num.jpg
//把这个路径 this.src 给body就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
</html>
成品下载
[btn href=”https://jpzy.lanzous.com/itwtriq4bhg” type=”success”]蓝奏网盘[/btn]
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容