javascript - 如何在 div 中获取 div 或图像的位置（顶部和左侧位置）并在 CSS 中使用这些值？

Question

我有一个动态的并使用引导程序的网站。我想在其中创建一个动画，其中 div class="col-md-4" 中的动态缩略图从那里单击缩放到容器中心的 100%。

我要创建一个点击效果来缩放图像，但不是从 div 的位置，而是从页面的中心。我正在尝试定位图像。

x = document.getElementById("Image")

t = x.top;
l = x.left;

function hello() {
x.style.top = x.top + "px";
x.style.left = x.left + "px";
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
  <img id="Image" src="abc.jpg">
  <h2>ABC</h2>
</div>

但没有运气。如果有人可以帮助我。请做。谢谢。

标签： javascriptjqueryhtmlcss

Answer 1

尝试使用getBoundingClientRect

x.getBoundingClientRect()它将为您提供元素在文档中的绝对位置。

您可以使用此StackOverflow获取视口的高度和宽度

从那里你可以得到你正在寻找的适当的偏移量。