随着互联网技术的发展，网页的动态效果越来越受到用户的喜爱。其中，点击换图效果是一种简单而实用的网页动态效果。本文将介绍如何通过CSS轻松实现点击换图效果，让你的网页更加生动有趣。

1. 基本原理

2. 实现步骤

2.1 HTML结构

<div class="image-container">
  <img src="original.jpg" alt="Original Image">
</div>

2.2 CSS样式

接下来，我们为这个div元素添加CSS样式。主要涉及以下三个方面：

  • 设置图片的尺寸和位置。
  • 使用:hover伪类选择器改变图片的背景。
  • 为图片添加点击事件。
.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.image-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease-in-out;
}

.image-container:hover img {
  transform: scale(1.1);
}

.image-container:active img {
  transform: scale(0.9);
}

2.3 JavaScript事件处理

<script>
  var imageContainer = document.querySelector('.image-container');
  var img = imageContainer.querySelector('img');

  imageContainer.addEventListener('click', function() {
    if (img.src.indexOf('original.jpg') !== -1) {
      img.src = 'hover.jpg';
    } else {
      img.src = 'original.jpg';
    }
  });
</script>

3. 总结

4. 代码示例

以下是完整的代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>点击换图效果</title>
  <style>
    .image-container {
      width: 300px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }

    .image-container img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      transition: transform 0.5s ease-in-out;
    }

    .image-container:hover img {
      transform: scale(1.1);
    }

    .image-container:active img {
      transform: scale(0.9);
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img src="original.jpg" alt="Original Image">
  </div>
  <script>
    var imageContainer = document.querySelector('.image-container');
    var img = imageContainer.querySelector('img');

    imageContainer.addEventListener('click', function() {
      if (img.src.indexOf('original.jpg') !== -1) {
        img.src = 'hover.jpg';
      } else {
        img.src = 'original.jpg';
      }
    });
  </script>
</body>
</html>

你可以将这段代码保存为HTML文件，然后用浏览器打开它，就可以看到点击换图效果了。