jquery实现页面图片等比例放大缩小功能

要实现页面图片等比例放大缩小的功能，你可以使用jQuery来监听鼠标滚轮事件（`wheel`），并根据滚动的方向来调整图片的尺寸。以下是一个简单的实现示例：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片等比例放大缩小</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #resizable-image {
    width: 200px; /* 初始宽度 */
    transition: transform 0.25s ease; /* 平滑过渡效果 */
    cursor: zoom-in; /* 鼠标悬停时显示放大图标 */
  }
</style>
</head>
<body>

<img id="resizable-image" src="your-image-url.jpg" alt="Resizable Image">

<script>
$(document).ready(function() {
  var scaleFactor = 1.0; // 缩放因子，初始为1

  $('#resizable-image').on('wheel', function(event) {
    event.preventDefault(); // 阻止默认滚动行为

    // 判断滚轮方向
    if (event.originalEvent.deltaY < 0) {
      // 向下滚动，放大图片
      scaleFactor *= 1.1;
    } else {
      // 向上滚动，缩小图片
      scaleFactor /= 1.1;
    }

    // 限制缩放范围，这里简单设置为0.5到2倍
    scaleFactor = Math.min(Math.max(0.5, scaleFactor), 2);

    // 应用缩放
    $(this).css('transform', 'scale(' + scaleFactor + ')');

    // 根据需要调整光标样式
    if (scaleFactor >= 1) {
      $(this).css('cursor', 'zoom-in');
    } else {
      $(this).css('cursor', 'zoom-out');
    }
  });
});
</script>

</body>
</html>

在这个示例中，我使用了jQuery来监听图片的`wheel`事件，根据滚轮的滚动方向（`deltaY`的正负）来调整图片的缩放因子`scaleFactor`。然后，我使用CSS的`transform: scale()`属性来应用缩放效果，并通过`transition`属性添加了平滑过渡效果。

请注意，你需要将`your-image-url.jpg`替换为你想要缩放的图片的URL。此外，我还添加了一些基本的样式和逻辑来根据缩放级别改变鼠标的光标样式，以提供更好的用户体验。

这个示例提供了一个基本的框架，你可以根据需要进行调整和扩展。