js的qq换肤效果

本文详细介绍了如何在HTML中使用JavaScript为图片列表实现点击更换背景的效果,分别展示了使用for循环和forEach方法添加点击事件并设置body背景图片的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 演示效果

QQ录屏20240325093309 -original-original

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.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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值