div за курсором

[f1nik]

Здравствуйте, дорогие участники форума.

Помогите осуществить замысел. Первая из проблем, с которой я столкнулся при реализации замысла такая:

У меня есть div-блок:

	div.panel { 
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 150px;

	}

Как вы видите, этот блок растянут по ширине, с высотой 150px.

Мне нужно сделать так(видимо, с помощью javascript):

Чтобы этот div блок следовал за курсором мыши. Независимо от горизонтального передвижения курсора.

Помогите, заранее благодарен.

[psywalker]

http://javascript.ru/ui/draganddrop

[f1nik]

Мне кажется это для меня пока сложновато. Да и не кажется, а я уверен. Хоть убей, не нашел скрипт автоматического следования объекта за курсором.

[sigma77]

Мне кажется это для меня пока сложновато. Да и не кажется, а я уверен. Хоть убей, не нашел скрипт автоматического следования объекта за курсором.

Тебе нужно событие mousemove, обработчик событий event и координаты курсора, которые будут свойствами top и left абсолютно спозиционированного блока.

Примерчик: http://polygon2009.freehostia.com/jsGallary2/index2.html

[psywalker]

Да, или вот например http://psywalker.ru/Forum/JS/Primitive/Dom-Zadachi/Clip/2.html

[f1nik]

Тебе нужно событие mousemove, обработчик событий event и координаты курсора, которые будут свойствами top и left абсолютно спозиционированного блока.

Примерчик: http://polygon2009.freehostia.com/jsGallary2/index2.html

Окей, хороший пример, но прошу, помогите разобраться полностью, ибо я в js вообще не понимаю ничего.

Вот код с этой страницы:

$(document).ready(function() {
	$('li').mousemove(function(event) { // li - элемент при наведении на который показывается большая картинка
	/* Расчет координат курсора */
	var pos = $(this).offset();
	var pageX = event.pageX;
	var pageY = event.pageY;
	var x = pageX - pos.left + 10;
	var y = pageY - pos.top + 10;

	$(this).children('.big').css({ // .big - класс больших картинок
		'display' : 'block',
		'left' : x + 'px',
		'top' : y + 'px'});
	});

	$('li').mouseout(function() {
		$(this).children('.big').hide();
	});
});

Так, строка $('li').mousemove(function(event) нужна для определения элемента, при котором будет показываться картинка, следующая за курсором.

Далее, расчет координат курсора, это вроде бы понятно...

Потом, $(this).children('.big').css({ // .big - не пойму ничего тут.

И потом, mouseout, который мне, по сути, не нужен, т.к. я хочу постоянное следование div-блока за курсором.

И как же мне тогда переделать код, чтобы привязать само движение самому блоку за курсором? Прошу, помогите. Ничего не понимаю!

[sigma77]

Потом, $(this).children('.big').css({ // .big - не пойму ничего тут.

И потом, mouseout, который мне, по сути, не нужен, т.к. я хочу постоянное следование div-блока за курсором.

Здесь идет обращение к дочернему блоку с классом .big(увеличенная картинка), родителем которого является элемент li, на который в данный момент наведен курсор.

У меня по умолчанию картинка скрыта, поэтому при наведении ей присваивается свойство 'block'.

Далее картинке присваиваются координаты. Картинка позиционируется (position: absolute) относительно родительского элемента (position: relative)

Всё это безобразии происходит при движени курсора мыши по соответствующему элементу списка.

Если mouseout не нужен, его можно спокойно выкинуть.

[psywalker]

Оксан, а чё ж джиквери то опять?

[f1nik]

Спасибо, ребят.

Я, похожу, разобрался.

[sigma77]

Оксан, а чё ж джиквери то опять?

Да это первый, что под руку попался. Когда писала его, нужен был как раз на jquery

Ну, в принципе, переписать его на чистом js не проблема.

[psywalker]

Да это первый, что под руку попался. Когда писала его, нужен был как раз на jquery

Ну, в принципе, переписать его на чистом js не проблема.

:)