Javascript: движение картинки за курсором по-современному

Вроде бы недавно писалось, но на базе древнего кода, так что работать толком не будет ни в новых IE 10-11, ни в новой линейке Firefox, а может, и в других браузерах, других под рукой нет.

Старый заслуженный код корёжить не хочется, сделаем движение картинки за курсором мыши по-современному и простому. Для скорости разработки реализуем только движение изображения за курсором, ведь при необходимости можно в функции getClickPosition определить более сложные правила для установки требуемых координат картинки (picture.style.left и picture.style.top), например, как-то зависящие от расстояния между рисунком и курсором мыши, как в том коде с круговым движением.

Задачу решим за 3 простых шага.

1. Поставим картинку, которая будет бегать за курсором поверх остального контента. Правда, она будет при этом занимать место в макете сайта. Зато стиль задаст заодно поведение картинки, чтобы она начинала двигаться через нужное время и не делала это слишком интенсивно:

<img id="thing" src="thing.gif" 
 style="z-index: 99; position: relative; transition: left .65s ease-in, top .65s ease-in;">

<p>Много контента, чтоб у BODY была высота, где разб<b>е</b>гаться
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1

2. Поставим в теге яваскрипта обработчик события, связанного с движением курсора мыши:

<script type="text/javascript">
 
document.body.addEventListener("mousemove", getClickPosition, false);

3. В этом же теге следом напишем функции, которые умеют вычислять настоящее положение курсора мыши, может, мои и не самые лучшие:

function getClickPosition (e) { //слушатель события движения мыши
 var picture = document.querySelector("#thing");
 var parentPosition = getPosition(e.currentTarget);
 var xPosition = e.clientX - parentPosition.x - (picture.clientWidth / 2);
 var yPosition = e.clientY - parentPosition.y - (picture.clientHeight / 2);
 picture.style.left = xPosition + "px";
 picture.style.top = yPosition + "px";
}

function getPosition(element) { //расчёт позиции элемента
 var xPos = 0;
 var yPos = 0;
 while (element) {
  if (element.tagName == "BODY") {
   var xScroll = element.scrollLeft || document.documentElement.scrollLeft;
   var yScroll = element.scrollTop || document.documentElement.scrollTop;
   xPos += (element.offsetLeft - xScroll + element.clientLeft);
   yPos += (element.offsetTop - yScroll + element.clientTop);
  } 
  else {
   xPos += (element.offsetLeft - element.scrollLeft + element.clientLeft);
   yPos += (element.offsetTop - element.scrollTop + element.clientTop);
  }
  element = element.offsetParent;
 }
 return { x: xPos, y: yPos };
}
</script>

Это всё, вот пример в работе.

 Открыть пример Движение картинки за курсором мыши в текущей вкладке (2 Кб)

картинка примера

В листинге предполагается, что картинка находится в той же папке, что и код, под именем thing.gif, в выложенном файле это не так.

Если надо адаптировать подобный код к браузерам без CSS3 - Prefix 3 рулит, подключите его до скрипта. Код проверен в 4 основных браузерах, сработал одинаково.

P.S. Ну и тормозят же эти новые технологии :)

09.02.2017, 17:14 [15298 просмотров]