用js怎么写图片放大效果

在JavaScript中实现图片放大效果，通常会结合CSS样式来完成。以下是一个简单的示例，展示了如何使用JavaScript和CSS来实现图片的放大效果：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片放大效果</title>
<style>
  .image-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
  }
  .image-container img {
    width: 100%;
    transition: transform 0.3s ease;
  }
  .image-container:hover img {
    transform: scale(1.2);
  }
</style>
</head>
<body>

<div class="image-container">
  <img src="your-image-url.jpg" alt="Your Image">
</div>

<script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

// 如果需要通过JavaScript动态添加效果，可以使用以下代码
document.addEventListener('DOMContentLoaded', function() {
  var images = document.querySelectorAll('.image-container img');
  images.forEach(function(img) {
    img.style.transition = 'transform 0.3s ease';
    img.addEventListener('mouseover', function() {
      this.style.transform = 'scale(1.2)';
    });
    img.addEventListener('mouseout', function() {
      this.style.transform = 'scale(1)';
    });
  });
});

解释

HTML部分：创建了一个包含图片的div容器，并为其添加了一个类名image-container。
CSS部分：
- .image-container：设置为相对定位，并隐藏溢出的内容。
- .image-container img：设置图片宽度为100%，并添加过渡效果。
- .image-container:hover img：当鼠标悬停在图片上时，图片会放大到1.2倍。