Question

有没有办法使用JS或jQuery将对象（如图像）移动到屏幕上的特定坐标？我的意思是不使用百分比或像素作为其位置和距离上/下的距离。

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

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

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

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

以下是我的代码： html - ＆gt;

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

CSS - ＆gt;

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

jQuery - ＆gt;

    $(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大小的排版，您可以实现您所描述的内容。

你也可以使用％top: '40%', left: '40%'，但％是基于元素的第一个相对父亲的大小。因此，除非#fullmenu是屏幕尺寸（高度和宽度）的100％，否则它将无法工作。

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

1 个答案: