使用jQuery实现图片双击缩放及Div内拖拽滚动遇问题求助

看你贴的代码有截断，而且逻辑上只处理了双击的部分判断，缺少放大后的拖拽实现，还有状态切换的完整逻辑。我来帮你梳理并写出完整可运行的解决方案：

第一步：准备基础HTML结构 #

先确保页面有对应的容器，方便后续功能实现：

<!-- 原始图片展示容器 -->
<div class="image-container">
  <img src="your-image-path.jpg" class="ept-custom-img" alt="可双击放大的图片">
</div>

<!-- 放大弹窗容器 -->
<div class="popup" style="display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.8); z-index:9999;">
  <div class="popup-content" style="width:100%; height:100%; overflow:hidden; position:relative;">
    <img id="popup_img_content" style="position:absolute; cursor:grab;" alt="放大后的图片">
  </div>
</div>

第二步：完整的jQuery功能实现 #

$(document).ready(function() {
  let touchtime = 0;
  let isDragging = false;
  let startX, startY, initialX, initialY, xOffset = 0, yOffset = 0;

  // 处理双击/触摸双击事件
  $('.ept-custom-img').on('click touchstart', function(e) {
    e.preventDefault();
    const currentImg = $(this);
    const imgSrc = currentImg.attr('src');
    const popup = $('.popup');
    const popupImg = $('#popup_img_content');

    if (touchtime === 0) {
      touchtime = new Date().getTime();
    } else {
      const timeDiff = new Date().getTime() - touchtime;
      if (timeDiff < 800) {
        // 触发双击放大逻辑
        popupImg.attr('src', imgSrc);
        // 等待图片加载完成后计算适配尺寸
        popupImg.on('load', function() {
          const imgWidth = $(this).width();
          const imgHeight = $(this).height();
          const viewportWidth = $(window).width();
          const viewportHeight = $(window).height();

          // 计算初始缩放比例：确保图片完整显示在视口内
          const scaleX = viewportWidth / imgWidth;
          const scaleY = viewportHeight / imgHeight;
          const initialScale = Math.min(scaleX, scaleY);

          $(this).css({
            width: imgWidth * initialScale,
            height: imgHeight * initialScale,
            top: (viewportHeight - imgHeight * initialScale)/2,
            left: (viewportWidth - imgWidth * initialScale)/2
          });

          popup.fadeIn();
        });

        touchtime = 0;
      } else {
        touchtime = new Date().getTime();
      }
    }
  });

  // 拖拽滚动核心逻辑
  $('#popup_img_content').on('mousedown touchstart', function(e) {
    e.preventDefault();
    isDragging = true;
    // 获取初始点击/触摸位置
    startX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
    startY = e.type === 'mousedown' ? e.clientY : e.touches[0].clientY;
    initialX = xOffset;
    initialY = yOffset;
    $(this).css('cursor', 'grabbing');
  });

  $(document).on('mousemove touchmove', function(e) {
    if (!isDragging) return;
    e.preventDefault();
    const currentX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
    const currentY = e.type === 'mousemove' ? e.clientY : e.touches[0].clientY;
    // 计算偏移量并应用到图片上
    xOffset = initialX + (currentX - startX);
    yOffset = initialY + (currentY - startY);
    $('#popup_img_content').css({
      transform: `translate(${xOffset}px, ${yOffset}px)`
    });
  });

  $(document).on('mouseup touchend', function() {
    isDragging = false;
    $('#popup_img_content').css('cursor', 'grab');
  });

  // 点击弹窗背景关闭放大状态
  $('.popup').on('click', function(e) {
    if ($(e.target).hasClass('popup')) {
      $(this).fadeOut();
      // 重置拖拽偏移量，避免下次打开时位置异常
      xOffset = 0;
      yOffset = 0;
      $('#popup_img_content').css('transform', 'translate(0, 0)');
    }
  });
});

关键优化说明 #

• 完善双击判断：兼容鼠标点击和移动端触摸事件，修复了原代码逻辑截断的问题
• 拖拽交互完整实现：通过监听鼠标/触摸的按下、移动、松开事件，实现图片在弹窗内的自由拖拽滚动
• 初始适配优化：放大图片时自动计算缩放比例，确保图片完整显示在视口内
• 状态重置处理：关闭弹窗时重置拖拽偏移量，避免下次打开图片位置错乱
• 交互细节优化：拖拽时切换鼠标样式，提升用户感知

如果你的原始代码里有srsize这类自定义尺寸判断变量，直接替换初始缩放逻辑里的适配规则即可。

内容的提问来源于stack exchange，提问作者Keval Mehta