文章目录
- 1. 演示效果
- 2. 分析思路
- 3. 代码实现
- 3.1. 方式一
- 3.2. 方式二
- 3.3. 整体代码
1. 演示效果
2. 分析思路
- 先编写样式，弄好布局和排版。
- 遍历这个集合，对每个图片元素（
img）添加一个点击事件监听器。 - 可以使用 for 或者 forEach 进行遍历。
3. 代码实现
3.1. 方式一
使用 for 进行循环。
for (let i = 0; i < imgs.length; i++) {//添加点击事件imgs[i].onclick = function () {//使用this(this:谁调用我,我代表谁.this就代表点击的那个图片)console.log(this.src);//设置body的背景为点击的图片document.querySelector("body").style.background = `url(${this.src})`;};
}
3.2. 方式二
使用 forEach 进行循环，可以省略 i。
imgs.forEach((img) => {img.addEventListener("click", function () {document.body.style.backgroundImage = `url(${this.src})`;});
});
3.3. 整体代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>qq换肤效果</title><style>* {padding: 0;margin: 0;}body {background: url(./img/1.jpg);background-size: cover;}.baidu {width: 440px;list-style: none;margin: 100px auto;background: white;overflow: hidden;}.baidu li {float: left;margin-top: 2px;}.baidu img {width: 100px;padding: 5px;cursor: pointer;}</style></head><body><ul class="baidu"><li><img src="./img/1.jpg" alt="" /></li><li><img src="./img/2.jpg" alt="" /></li><li><img src="./img/3.jpg" alt="" /></li><li><img src="./img/4.jpg" alt="" /></li></ul><script>// 获取元素const imgs = document.querySelectorAll("img");// for (let i = 0; i < imgs.length; i++) {// //添加点击事件// imgs[i].onclick = function () {// //使用this(this:谁调用我,我代表谁.this就代表点击的那个图片)// console.log(this.src);// //设置body的背景为点击的图片// document.querySelector("body").style.background = `url(${this.src})`;// };// }imgs.forEach((img) => {img.addEventListener("click", function () {document.body.style.backgroundImage = `url(${this.src})`;});});</script></body>
</html>
