Координаты курсора с помощью jQuery

Координаты курсора с помощью jQuery. Введение

В этой статье я покажу маленький но полезный пример, как получать координаты курсора с помощью jQuery. Довольно часто приходится получать координаты курсора, как относительно всей страницы, так и относительно какого-нибудь элемента на странице, например внутри дива. Эти два варианта я и покажу. С первым все просто, можно обрабатывать событие, например, mousemove и получать в нем координаты относительно страницы. Со вторым вариантом — координаты внутри элемента, не на много сложнее: получаем координаты элемента и координаты курсора, находим разницу, а ответ и будет положение курсора внутри элемента.

Координаты курсора с помощью jQuery. Пример

Для наглядности приведу рабочий пример:

Координаты курсора с помощью jQuery. Код

А теперь сам код, получение координат относительно всей страницы:

$(document).mousemove(function(e){
    var X = e.pageX; // положения по оси X
    var Y = e.pageY; // положения по оси Y
    console.log("X: " + X + " Y: " + Y); // вывод результата в консоль
});		

Получение координат относительно элемента

$(document).ready(function(){
  $('.div_hover').mousemove(function(e){
	// положение элемента
	var pos = $(this).offset();
	var elem_left = pos.left;
	var elem_top = pos.top;
	// положение курсора внутри элемента
	var Xinner = e.pageX - elem_left;
	var Yinner = e.pageY - elem_top;
	console.log("X: " + Xinner + " Y: " + Yinner); // вывод результата в консоль
  });
});

На этом все.