js的qq换肤效果

文章目录

1. 演示效果
2. 分析思路
3. 代码实现
- 3.1. 方式一
- 3.2. 方式二
- 3.3. 整体代码

1. 演示效果

QQ录屏20240325093309 -original-original

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>