рассчитать расстояние между двумя движущимися элементами - PullRequest
Новая
       7

рассчитать расстояние между двумя движущимися элементами

0 голосов
/ 25 мая 2018

Я пытаюсь вычислить расстояние между двумя движущимися элементами 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>

Посмотреть на JSFiddle

Ответы [ 3 ]

0 голосов

Вы можете найти, как получить (X, Y) координаты html-элемента здесь:

Получить позицию (X, Y) HTML-элемента

Получив координаты (x, Y), расстояние становится математической задачей:

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

0 голосов
/ 25 мая 2018

Вам потребуется либо установить событие синхронизации Timing для запуска по времени X и обновить информацию в вашем div результатов, либо установить обработчик события для элемента HTML при каждом его перемещении, чтобы он обновлял результат. 

setInterval(function, milliseconds)

// Постоянно повторяет выполнение функции.

0 голосов
/ 25 мая 2018

Результат устанавливается только один раз.Вам нужно будет обновить его при перемещении объектов.
Одним из решений является обновление значения по таймеру с использованием 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>
...