Question

我有一个figure，孩子img。图像很大，显示了UX流。我已经建立了一个交互，其中单击图像将在figure内将其放大，然后将mousemove与transform-origin一起使用以平移并查看整个图像，效果很好。现在，通过单击全屏展开figure可以使演示更加身临其境，这也可以，但是问题是mousemove的坐标显然已经改变，并且在平移/移动光标的那一刻，随着坐标更新到新的上下文（figure的尺寸已更改），图像会跳转/移动。

代码和小提琴链接在下面。

最近尝试

我尝试在点击时动态地为图像插入新的容器，以便将其作为坐标的上下文，但是mousemove不再起作用。

我还尝试将.zoomed的{{1}}的{{1}}状态作为目标，这也阻止了figure正常工作。

HTML

mousemove

CSS

mousemove

jQUERY

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

JSFIDDLE

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

当图像容器的尺寸改变时，如何重新坐标化坐标？

Answer 1

解决方案可能是在缩放图像后（在click之后的toggleClass回调中），以与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的坐标？

1 个答案: