javascript - 如何将像素添加到元素的当前位置？

Question

我想将图像从其当前位置向右移动，因此我需要将像素添加到它现在所处的左侧位置。

我有一个 flex 容器，其中有一个 image 和一个 div。它们都以具有 justify-content: center; 属性的容器为中心。

我遇到的问题是，当我尝试移动位置为 absolute 的图像时，它会返回到最近的位置为 relative 的父级(其容器)并开始在那里添加像素，这会产生一种奇怪的视觉效果。

HTML代码:

<button type="button" onclick="moveImage()">Move image</button>
<div id="container">
  <div id="left" class="block">Left</div>
  <div id="center" class="block">
    <img id="image" src="https://appharbor.com/assets/images/stackoverflow-logo.png" alt="stackoverflow">
  </div>
  <div id="right" class="block">Right</div>
</div>

CSS代码:

html, body{
    width: 100%;
    height: 100%;
}

#container{
    display: flex;
    height: 100%;
}

.block{
    flex: 1;
}

#left{
    background-color: red;
}

#center{
    position: relative;
    display: flex;
    background-color: yellow;
    justify-content: center;
}

#right{
    background-color: orange;
}

#divCentered{
   width: 50%;
   height: 100px;
   background-color: brown;
}

Javascript 代码:

$( document ).ready(function() {
     var divParent = document.getElementById('center');
     var div = document.createElement("div");
     div.setAttribute("id", "divCentered");
     divParent.appendChild(div);
});

function moveImage(){
  $("#image").animate({
    left: "+=300px"
  }, 1000);  
}

JSFiddle您可以在其中看到图像如何返回到其父级并开始在那里添加像素。

有没有办法避免图像将一些像素返回到其父级并开始在其当前位置添加像素？

提前致谢!

Answer 1

最后，经过大量证明，我找到了解决方法。

我必须使用 .offset()属性获取 container 和 image left 属性作为文档的引用。

然后，我必须将图像的 left 属性设置为 0，因为当 container 位于左侧时它会被定位(因为容器是相对 绝对 图像的父级)。

之后，只需将两个值相减即可得到容器偏移量与图像之间的差值，从而得到图像相对于其容器的实际位置，并将此值设置为 left 属性图片。

这是我添加的代码:

var leftCenterDiv = $("#center").offset().left;
var leftImage = $("#image").offset().left;

$("#image").css("left", 0);
$("#image").css("left", leftImage - leftCenterDiv);

和更新的JSFiddle .