网页中图片点击放大缩小代码

在网页中实现图片点击放大缩小功能通常会利用JavaScript和CSS以及HTML结合。下面是一个简单的示例，展示了如何使用JavaScript库如`zoom.js`或者原生的`<img>`标签配合CSS来实现：

<!-- HTML部分 -->
<img src="your-image-url" class="zoomable" data-zoom-image="large-image-url">

<!-- CSS部分 (假设放在一个名为styles.css的文件中) -->
.zoomable {
  cursor: -webkit-zoom-in; /* 鼠标放大的样式 */
  cursor: zoom-in;
  transition: transform 0.5s ease; /* 添加平滑过渡效果 */
}

.zoomable:hover {
  transform: scale(1.1); /* 当鼠标悬停时，图片放大10% */
}

/* JavaScript部分 (如果使用zoom.js) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/zoomy/4.0.1/jquery.zoomy.min.js"></script>
<script>
$(document).ready(function() {
  $('.zoomable').zoomy(); // 初始化图片的放大功能
});
</script>

在这个例子中，当用户点击图片时，如果没有使用特定库，就会通过CSS的`transform: scale()`属性将其放大；如果使用了`zoom.js`，则可以提供更丰富的交互体验，如双击缩放、拖动缩放等。