将图像缩小到鼠标点击位置的坐标？ （jQuery的）

Question

我对此很陌生，但是我一直在努力让图像在中心点上缩小到任何东西，使用以下代码和相对定位的组合可以很好地工作在CSS。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

然而，我希望能够做的是改变这一点，使图像在点击点的中心缩小。我尝试过绝对定位并尝试将top / left设置为pageX和pageY的值（以及将它们分配给变量的额外步骤），但没有骰子。

有没有人知道如何做到这一点？感谢。

Answer 1

首先欢迎Stack Overflow！

如何使用CSS动画？

在动画中使用questionsList.find({question:"What year did the US land on the moon?"}).fetch()[0].answer 代替transform和width，以获得更好的效果。

CODE SNIPPET

height

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

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

以下是有关CSS transform和animation属性的更多信息。

Answer 2

＆＃13;

＆＃13;

public class BestFriends {

    private static int friendNumber = 0;
    private int friendIdNumber;
    private String firstName;
    private String lastName;
    private String nickName;
    private String cellPhoneNumber;


    public BestFriends (String aFirstName, String aLastName, String aNickName, String aCellPhone)
    {
        firstName = aFirstName;
        lastName = aLastName;
        nickName = aNickName;
        cellPhoneNumber = aCellPhone;
        friendIdNumber = ++friendNumber;   
    }

    public String getFirstName()
    {
        return firstName;
    }

    public String getLastName()
    {
        return lastName;
    }

    public String getNickName()
    {
        return nickName;
    }

    public String getCellPhone()
    {
        return cellPhoneNumber;
    }

    public int getFriendId()
    {
        return friendIdNumber;
    }

    public String toString()
    {
        return friendIdNumber + ". " + firstName + " (" + nickName + ") " +  lastName + "\n" + cellPhoneNumber + "\n";
    }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;