如何在容器尺寸发生变化时刷新 mousemove 的坐标？

Question

我有一个 figure 和 child img。图片很大，显示了用户体验流程。我已经设置了一个交互，单击图像将在 figure 内放大它，并使用 mousemove 和 transform-origin 来平移并查看整个图像，效果很好。我现在通过在单击时扩展 figure 全屏来使演示文稿更加身临其境，这也有效，但问题是 mousemove 的坐标已经明显改变，并且当你 pan/move光标，图像 jumps/shifts 作为坐标更新到新上下文（figure 在其更改的维度）。

代码和Fiddle link如下。

最近的尝试

我曾尝试在单击时为图像动态插入一个新容器，这样它将成为坐标的上下文，但 mousemove 不再有效。

我还尝试将 figure 的 .zoomed 状态设为 mousemove，这也阻止了 mousemove 工作。

HTML

<div class="gallery-item-wrap">
  <figure class="zoom">
    <img src="https://picsum.photos/id/1040/1800/1000">
  </figure>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.gallery-item-wrap {
  width: 70vw;
  margin: 0 auto;
}

figure {
  margin: 0;
}

figure img {
  width: 100%;
  height: auto;
}

figure.zoomed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  overflow: hidden;
}

figure.zoomed img {
  transform: scale(2);
}

jQUERY

$('.zoom').click(function () {
  $(this).toggleClass('zoomed');
});

$('.zoom')
.on('mousemove', function(e){
  $(this).children('.zoom img').css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
})

JSFIDDLE

https://jsfiddle.net/iraishere/w1pe7tjm/19/

当图像容器的尺寸发生变化时，如何重新设置坐标？

Answer 1

解决方案可能是在缩放图像后更新坐标（在 toggleClass 之后的 click 回调中），方法与 move 处理程序相同。

像这样：

$('.zoom').click(function(e) {
  $(this).toggleClass('zoomed');
  move(e, $(this));
});

$('.zoom')
  .on('mousemove', function(e) {
    move(e, $(this));
  })

function move(e, elm) {
  elm.children('.zoom img').css({
    'transform-origin': ((e.pageX - elm.offset().left) / elm.width()) * 100 + '% ' + ((e.pageY - elm.offset().top) / $(this).height()) * 100 + '%'
  });
}

https://jsfiddle.net/moshfeu/8mcu23tn/

如何在容器尺寸发生变化时刷新 mousemove 的坐标？

How to refresh coordinates of mousemove when container dimensions change?

jquery

mousemove