javascript - 将图像缩小到鼠标点击位置的坐标？ (jQuery)

Question

我对此很陌生，但我一直在尝试让图像在中心点上缩小到什么都没有，结合使用以下代码和 CSS 中的相对定位，效果相当好。

$(function() {
            $('#imageID').on('click', function() {
                $(this).animate({
                    width: 0,
                    height: 0,
                    top: '185px',
                    left: '-2px'
                }, 200);
       
            });
          });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

但是，我希望能够做的是更改此设置，以便图像以单击的点为中心缩小。我尝试过绝对定位并尝试将顶部/左侧设置为 pageX 和 pageY 的值(以及将它们分配给变量的额外步骤)但没有成功。

有没有人知道如何/是否可以做到这一点？谢谢。

Answer 1

首先欢迎来到 Stack Overflow!

为此使用 CSS 动画怎么样？

在动画中使用 transform 代替 width 和 height 以获得更好的性能。

---

代码片段:

$(function() {
  $('#imageID').on('click', function() {
    $(this).addClass("shrink");
  });
});

.shrink {
  animation: shrink 300ms linear forwards;
}
@keyframes shrink {
  to {
    transform: scale(0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="imageID" src="http://fillmurray.com/300/300">

---

这是关于 CSS 的更多信息 transform和 animation属性。