js的qq换肤效果

1. 演示效果

2. 分析思路

1. 先编写样式，弄好布局和排版。
2. 遍历这个集合，对每个图片元素（img）添加一个点击事件监听器。
3. 可以使用 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[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>

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: React__ 一 、Reactj基础

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、创建react项目 创建项目模板 文件目录 JSX基础语法 react基础 事件绑定 useState 安装插件lodash js方法插件 css c服务器托管网lassNa…