将图像缩小到鼠标单击位置的坐标?(jQuery)

Shrinking an image to the coordinates of a mouse click position? (jQuery)

本文关键字：坐标 jQuery 位置 缩小 图像 鼠标 单击      更新时间：2023-09-26

我对这个很陌生，但是我一直在尝试让图像在中心点上缩小到零，使用下面的代码和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的值(以及将它们分配给变量的额外步骤)，但没有骰子。

有人知道如何/如果这可以做到吗?谢谢。

首先欢迎来到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属性的更多信息 

$(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>

相关文章：