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毫秒更新一次结果。

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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 Timing Event以在X时间触发并更新结果div中的信息，或者每次移动时在HTML元素上设置一个事件处理程序，以便更新结果。

setInterval(function, milliseconds)

//连续重复执行该功能。

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

3 个答案: