Question

我有一张图片，它在div里面。我想知道图像的下坐标是什么。就像它是一个带有角A，B，C和D的矩形，左边是A，我希望得到它的坐标。你能让我知道如何使用JavaScript或jQuery实现这一目标。

Answer 1

您可以使用.position()获取left和top坐标（top left corner）。获取bottom left corner只需将图像高度添加到顶部坐标。

$(window).load(function(){ //to make sure all images are loaded
  console.log($('img').position().left);
  console.log($('img').position().top + $('img').height());
});

div { padding: 30px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><img src="http://placehold.it/350x150"></div>

Answer 2

您可以使用JQuery position()执行此操作并返回left和top

var pos = $('img').position();
$('.result').append('(x: ' + pos.left + ', y: ' + pos.top + ')');

div {
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid black;
}
img {
  position: absolute;
  left: 40px;
  top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="http://placehold.it/50x50">
</div>
<span class="result"></span>

Answer 3

最好的解决方案是使用getBoundingClientRect()

var image = $( "img" );
var imageBounds = image.get(0).getBoundingClientRect();

var imageLeft = imageBounds.left;
var imageBottom = imageBounds.bottom;

Fiddle

但您也可以使用jQuery＆＃39; .position()获取顶部和左侧坐标，然后计算底部和右侧位置，只需添加.height()或.width()

var image = $( "img" );
var imagePosition = image.position();
var imageHeight = image.height();

var imageLeft = imagePosition.left;
var imageBottom = imagePosition.top + imageHeight;

Fiddle

或不使用jQuery：

var image = document.getElementById("image");
var imageBounds = image.getBoundingClientRect();

var imageLeft = imageBounds.left;
var imageBottom = imageBounds.bottom;

Fiddle

Answer 4

以下是codepen上的演示：http://codepen.io/ssh33/pen/AXdVER

等待图片下载以获取宽度和高度并调用GetCoordinates()。

如果先前已缓存图像$("#image").load()将永远不会触发。在这种情况下，$(window).load()会调用GetCoordinates()。 GetCoordinates()检查非数字宽度/高度，并在必要时检索它。

重新计算窗口大小调整。

var img_width, img_height, x, y;

$("#image").load(function() {
      img_width = this.width;   
      img_height = this.height;
});

var GetCoordinates = function(){
      if (isNaN(img_width) || isNaN(img_height)){
              img_width = $("#image").width();   
              img_height = $("#image").height();
      }

      var img_left = $("#image").offset().left;
      x = img_width + img_left;

      var img_top = $("#image").offset().top;
      y = img_height + img_top;
}  

$(window).load(function() {
      GetCoordinates(); 
});

$(window).resize(function() {
      GetCoordinates(); 
});

如何在html中获得较低的图像坐标

4 个答案: