js的qq换肤效果

news2024/10/6 20:30:58

文章目录

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>