jquery - 如何使用js将对象移动到屏幕上的特定坐标

Question

有没有办法使用 JS 或 jQuery 将对象(例如图像)移动到屏幕上的特定坐标？ 我的意思是不使用百分比或像素来表示它的位置和距顶部/左侧的距离。

更具体地说，我想通过单击图像来触发以下事件:一些图像，从屏幕中心开始，以动画方式移动到屏幕上的特定位置，该位置不会改变当窗口的宽度和高度发生变化时。

有没有办法，例如，将屏幕分成 100 block ，并使图像始终位于第 40 block ？

或者我必须为此使用 SVG 动画吗？

实际上我想制作背景图像，带有动画的图像，完全响应..

下面是我的代码: html -->

<div class="fullmenu">
   <img id="stable" src="menu/stable.svg">
   <img id="fr7" src="menu/fr7.svg">
</div>

CSS -->

#fullmenu{
    position: relative;
}
#stable{
    position: absolute;
}
#fr7{
    position: absolute;
    width: auto;
    top:0;
    left:0;
}

jQuery -->

    $(document).ready(function(){
    $("#stable").one("click", function(){
        $("#fr7").animate({
          top:"+=220",
          left:"+=420"
        },2000);
    });
});

Answer 1

$(document).ready(function(){
    $("#stable").one("click", function(){
        $("#fr7").animate({
          top: "40vh",
          left: "40vw"
        },2000);
    });
});

使用 Viewport Sized Typography，您可以实现您所描述的内容。

您也可以使用 %，例如 top: '40%', left: '40%' 但是 % 是基于元素的第一个相对父元素的大小。因此，除非#fullmenu 是屏幕尺寸(高度和宽度)的 100%，否则它不会工作。