02.04.2015

Определение координат курсора мыши

Возможности jQuery практически безграничны, главное преимущество — интерактивность. Благодаря jQuery можно создавать очень интересные проекты: будь то разработка сайта коттеджного посёлка или создание лендинг пейдж.

Очень часто нужно знать координаты курсора мыши, чтобы внедрить интерактив с пользователем. Сделать это очень просто, создав функцию, которая будет вызываться при событии mousemove и через event.pageX и event.pageY можно получить координаты курсора.

Помимо этого есть возможность определять координаты относительно другого объекта на сайте. Для этого нужно знать координаты самого объекта и инициализировать функцию определения координат при наведении на нужный объект.

<p id="coords1">Координаты курсора:</p>
<div class="hover">
	<p><b>Наведи курсор сюда</b></p>
	<p id="coords2">Координаты курсора:</p>
</div>

.hover {
	width: 100%;
	height: 200px;
	border: #000 solid 1px;
	padding: 20px;
	box-sizing: border-box;
}

$(document).ready(function(){
	// Координаты курсора относительно всего документа
	$(document).mousemove(function(event){
		var x = event.pageX;
		var y = event.pageY;
		$('#coords1').html( 'Координаты курсора: (' + x + '; ' + y + ')' );
	});
	// Координаты курсора относительно отдельного блока
	$('.hover').mousemove(function(event){
		var pos = $(this).offset();
		var elem_left = pos.left.toFixed(0);
		var elem_top = pos.top.toFixed(0);
		var x = event.pageX - elem_left;
		var y = event.pageY - elem_top;
		$('#coords2').html( 'Координаты курсора: (' + x + '; ' + y + ')' );
	});
});

Демонстрация