计算两个移动元素之间的距离

Question

我正在尝试计算两个移动 HTML 元素之间的距离。
现在，我将继续 :hover。
但是结果不会随着移动而改变。

怎么了？

这是我的代码：

var lFirst = $("#x").offset().left;
var lSecond = $("#y").offset().left;
var ldist = parseInt(lFirst - lSecond);

var tFirst = $("#x").offset().top;
var tSecond = $("#y").offset().top;
var tdist = parseInt(tFirst - tSecond);

$('#result').append(parseInt(tdist + ldist));

html, body{
  margin:0;
  padding:0;
}
*{
  transition:all 1s;
}
#x, #y{
  width:50px;
  height:50px;
  margin-left:0;
  margin-top:0;
  background:black;
}
#container{
  height:100vh;
  width:100vw;
  background:lightgrey;
}
#container:hover #x{
  margin-left:50vw;
}
#container:hover #y{
  margin-top:50vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="result"></div>
  <div id="x"></div>
  <div id="y"></div>
</div>

View on JSFiddle

Answer 1

结果只设置一次。您需要在对象移动时对其进行更新。
一种解决方案是使用 JavaScript 的 setInterval().
更新定时器的值在下面的示例中，我每 100 毫秒更新一次结果。

var $x=$('#x');
var $y=$('#y');
var $result=$('#result');

function updateDistance() {

  var lFirst = $x.offset().left;
  var lSecond = $y.offset().left;
  var ldist = parseInt(lFirst - lSecond);

  var tFirst = $x.offset().top;
  var tSecond = $y.offset().top;
  var tdist = parseInt(tFirst - tSecond);

 $result.text(parseInt(tdist + ldist));

}

setInterval(updateDistance, 100);

html,
body {
  margin: 0;
  padding: 0;
}

* {
  transition: all 1s;
}

#x,
#y {
  width: 50px;
  height: 50px;
  margin-left: 0;
  margin-top: 0;
  background: black;
}

#container {
  height: 100vh;
  width: 100vw;
  background: lightgrey;
}

#container:hover #x {
  margin-left: 50vw;
}

#container:hover #y {
  margin-top: 50vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="result"></div>
  <div id="x"></div>
  <div id="y"></div>
</div>

Answer 2

您可以在此处找到如何获取 html 元素的 (X,Y) 坐标：

Retrieve the position (X,Y) of an HTML element

一旦有了 (x,Y) 坐标，距离就只是一道数学题：

距离 = sqrt((x2-x1)^2 + (y2-y1)^2)

Answer 3

您必须设置 JavaScript 计时事件以在 X 时间触发并更新结果中的信息 div 或在 HTML 元素上设置事件处理程序它移动的时间会更新结果。

setInterval(function, milliseconds)

//不断重复函数的执行。

计算两个移动元素之间的距离

calculate distance between two moving elements

html

javascript

css

jquery

distance