基于jQuery实现图片缩放平移预览特

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-29 08:09:17

　　基于jQuery实现图片缩放平移预览特

基于jQuery实现图片缩放平移预览特效

理解需求

实现图片缩放平移预览功能，即用户可以在一个特定的区域内，通过鼠标滚轮缩放图片，并通过鼠标拖拽来移动图片，从而查看图片的局部细节。

实现思路

HTML结构:
- 创建一个容器div，作为图片展示的区域。
- 在这个容器内放置一个img标签，作为要展示的图片。
CSS样式:
- 设置容器div的样式，包括宽高、溢出隐藏等。
- 设置img标签的样式，初始状态下宽度和高度与容器相同。
jQuery交互:
- 监听鼠标滚轮事件，通过改变img标签的scale来实现缩放。
- 监听鼠标按下、移动和松开事件，实现拖拽功能。
- 计算鼠标在图片上的相对位置，并根据鼠标移动的距离来调整图片的位置。

代码示例

HTML

<!DOCTYPE html>
<html>
<head>
  <title>图片缩放平移预览</title>
  <style>
    #container {
      width: 500px;
      height: 300px;
      overflow: hidden;
    }
    #image {
      width: 100%;
      height: 100%;
      cursor: move;
    }
  </style>
</head>
<body>
  <div id="container">
    <img id="image" src="your_image.jpg" alt="">
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      const container = $('#container');
      con   st image = $('#image');

      let isDragging = false;
      let startX, startY;
      let scale = 1;

      container.on('wheel', (event) => {
        event.preventDefault();
        scale += event.deltaY * -0.01;
        scale = Math.min(Math.max(.125, scale), 4);
        image.css('transform', `scale(${scale})`);
      });

      container.on('mousedown', (event) => {
        isDragging = true;
        startX = event.clientX - container.offset().left;
        startY = event.clientY - container.offset().top;
      });

      $(document).on('mousemove', (event) => {
        if (isDragging) {
          const x = event.clientX - container.offset().left;
          const y = event.clientY - container.offset().top;
          const deltaX = x - startX;
          const deltaY = y - startY;
          startX = x;
          startY = y;
          image.css('transform', `scale(${scale}) translate(${deltaX}px, ${deltaY}px)`);
        }
      });

      $(document).on('mouseup', () => {
        isDragging = false;
      });
    });
  </script>
</body>
</html>