如何获取图像的位置并将另一个图像移动到该位置？

Question

如何获取 .img 类的位置，然后将 .img-2 类移动到与 .img 相同的位置？ 我知道我需要根据窗口位置获取 .img 的顶部和左侧位置，然后将这些值应用于我的anime.js 函数，但我没有正确执行...

在anime.js 函数中，我认为 translateX 和 translateY 值需要是 .img 的值，但我可能错了？

Codepen 是 here，我正在尝试在您单击“按钮”链接时实现这一点。

感谢任何帮助

<div class="container-fluid">
  <div class="row">
      <div class="col-lg-6">
          <a class="button" href="javascript:;">BUTTON</a>
      </div>
      <div class="col-lg-6">
           <img class="img-2" src="https://picsum.photos/200/300" alt="">
      </div>
  </div>
  <div class="row bottom-row">
    <div>
        <img class="img" src="https://picsum.photos/200/300" alt="">
    </div>
  </div>
</div>

.container {
  background-color: grey;
  height: 100vh;
}

.container-row {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.button {
  cursor: pointer;
  display: block;
}

.bottom-row {
  height: 100vh;
  background-color: red;
}

.img {
  width: 200px;
  height: auto;
  marign-top: 100px;
  display: block;
}

jQuery(document).ready(function ($) {
  
   const eTop = $('.img').offset().top; //get the offset top of the element
   const eLeft = $('.img').offset().left; //get the offset top of the element

  
  
  $('.button').on('click', function () {
    alert(eTop);
    alert(eLeft);

    anime({
      targets: '.img-2',
      translateY: eTop,
      translateX: eLeft,
      scaleX: 1,
      scaleY: 1,
    });
  });
});

片段：

jQuery(document).ready(function ($) {

   const eTop = $('.img').offset().top; //get the offset top of the element
   const eLeft = $('.img').offset().left; //get the offset top of the element



  $('.button').on('click', function () {
    alert(eTop);
    alert(eLeft);

    anime({
      targets: '.img-2',
      translateY: eTop,
      translateX: eLeft,
      scaleX: 1,
      scaleY: 1,
    });
  });
});

.container {
  background-color: grey;
  height: 100vh;
}

.container-row {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.button {
  cursor: pointer;
  display: block;
}

.bottom-row {
  height: 100vh;
  background-color: red;
}

.img {
  width: 200px;
  height: auto;
  marign-top: 100px;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js "></script>
<div class="container-fluid">
  <div class="row">
      <div class="col-lg-6">
          <a class="button" href="javascript:;">BUTTON</a>
      </div>
      <div class="col-lg-6">
           <img class="img-2" src="https://picsum.photos/200/300" alt="">
      </div>
  </div>
  <div class="row bottom-row">
    <div>
        <img class="img" src="https://picsum.photos/200/300" alt="">
    </div>
  </div>
</div>

Answer 1

首先，在图像完全加载之前，顶部和左侧的偏移量被保存在变量中。为避免这种情况，请在点击处理程序中移动 eTop 和 eLeft 行。

然后，你正在做一个翻译......所以你必须从“目标”中减去“要移动的元素”的初始位置。

jQuery(document).ready(function($) {

  $('.button').on('click', function() {

    // Target position
    const eTop = $('.img').offset().top; //get the offset top of the element
    const eLeft = $('.img').offset().left; //get the offset top of the element

    // Element to be moved position
    const bTop = $('.img-2').offset().top; //get the offset top of the element
    const bLeft = $('.img-2').offset().left; //get the offset top of the element


    //alert(eTop);
    //alert(eLeft);

    anime({
      targets: '.img-2',
      translateY: eTop - bTop,
      translateX: eLeft - bLeft,
      scaleX: 1,
      scaleY: 1,
    });
  });
});

.container {
  background-color: grey;
  height: 100vh;
}

.container-row {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.button {
  cursor: pointer;
  display: block;
}

.bottom-row {
  height: 100vh;
  background-color: red;
}

.img {
  width: 200px;
  height: auto;
  marign-top: 100px;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js "></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <a class="button" href="javascript:;">BUTTON</a>
    </div>
    <div class="col-lg-6">
      <img class="img-2" src="https://picsum.photos/200/300" alt="">
    </div>
  </div>
  <div class="row bottom-row">
    <div>
      <img class="img" src="https://picsum.photos/200/300" alt="">
    </div>
  </div>
</div>