Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.10.2010, 13:00
Аватар для vatrikovsky
Новичок на форуме
Отправить личное сообщение для vatrikovsky Посмотреть профиль Найти все сообщения от vatrikovsky
 
Регистрация: 27.10.2010
Сообщений: 3

Вертикальный скролл по mouseover
Делаю вертикально скроллящееся меню по типу вот этого:
http://www.netpro.ru/?action=DABlank2 (откройте "Мы сделали")
, только на javaScript + jQuery

HTML:
<div id="left_list">
  <p class="project_number"><a href="#">007</a></p>
  <p class="project_number"><a href="#">012</a></p>
  ...
  <p class="project_number"><a href="#">186</a></p> 
</div>


javascript:
$(document).ready(function(){
	// При наведении на левый блок
	var winHeight = $(window).height();
	var margin = $('#left_list').height() - winHeight;

	// движение при попадании курсора в области
	$('#left_list').unbind('mouseover').mouseover(function(e){
		// top 1/3
		if (e.pageY < (winHeight / 3))
		{
			var speed = (winHeight / 6) / e.pageY;
			if (speed > 2) speed = 2;
			$('#direction').val('top');
		}
		// bottom 1/3
		if (e.pageY > 2 * (winHeight / 3))
		{
			var speed =  (e.pageY - ((2 / 3) * winHeight)) / (winHeight / 6) + 0.5;
			if (speed > 2) speed = 2;
			$('#direction').val('bottom');
		}
		$('#speed').val(speed);
		
		var direction = $('#direction').val();
		var speed = $('#speed').val();
		
		//setInterval(function(){
		// bottom 1/3, list moves top
		if (direction == 'bottom')
		{
			if (parseInt($('#left_list').css('margin-top')) > (-1) * margin)
			{
				$('#left_list').animate({marginTop: '-=50px'}, (300 / speed));
				$('#int').val(parseInt($('#left_list').css('margin-top')));
			}
			else 
			{
				$('#left_list').animate({marginTop: '-' + margin + 'px'}, (300 / speed));
				$('#int').val(parseInt($('#left_list').css('margin-top')));	
			}
		}
		// top 1/3, list moves bottom
		if (direction == 'top')
		{	
			if ((parseInt($('#left_list').css('margin-top'))) < 0)
			{
				$('#left_list').animate({marginTop: '+=50px'}, (300 / speed));
				$('#int').val(parseInt($('#left_list').css('margin-top'))); 
			}
			else
			{
				$('#left_list').animate({marginTop: '0px'}, (300 / speed));
				$('#int').val(parseInt($('#left_list').css('margin-top'))); 
			}
		}
		
		// стопим, если увели мышь в середину
		if (direction == 'none')
		{
			$('#left_list').stop();
			//clearInterval();
		}
	});

	// остановка при выведении указателя за пределы
	$('#left_list').unbind('mouseout').mouseout(function(){
		$('#speed').val('0');
		$('#direction').val('none');
		$('#left_list').stop();
	});

	// увеличение номера при наведении
	$('#left_list > p.project_number').hover(
		function() {
			$(this).animate({fontSize: '10pt'}, 150);
		},
		function(){
			$(this).animate({fontSize: '8pt'}, 150);
		}
	);
});


Суть проблемы:
Во всем, кроме ФайрФокса, блок прокручивается именно при движении мыши, а при простое на месте тоже останавливается. Надо, естественно, чтобы везде просто при поднесении мыши к краю списка, он бы скроллился. Пробовал сделать через setInterval, но это страшно тормозит скрипт, нет ли очевидного и грамотного способа реализовать это?

Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 27.10.2010, 13:23
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

используйте метод mousemove
Ответить с цитированием
  #3 (permalink)  
Старый 27.10.2010, 14:10
Аватар для vatrikovsky
Новичок на форуме
Отправить личное сообщение для vatrikovsky Посмотреть профиль Найти все сообщения от vatrikovsky
 
Регистрация: 27.10.2010
Сообщений: 3

Изначально с mousemove'ом и писал, все работает, но появляется другая проблема - блок не останавливается при выведении из области, ведь mousemove возникает именно при начале движения курсора, как тогда его грамотно стопить?

Это, даже, в теории так. На практике и такая логика не прослеживается, просто реакция на движения мыши становится непредсказуемой.

Последний раз редактировалось vatrikovsky, 27.10.2010 в 14:13.
Ответить с цитированием
  #4 (permalink)  
Старый 27.10.2010, 14:29
2de 2de вне форума
Аспирант
Отправить личное сообщение для 2de Посмотреть профиль Найти все сообщения от 2de
 
Регистрация: 26.10.2010
Сообщений: 78

Есть событие onmouseout, используйте его для случая когда мыша выходит за пределы списка
Ответить с цитированием
  #5 (permalink)  
Старый 27.10.2010, 14:31
Аватар для vatrikovsky
Новичок на форуме
Отправить личное сообщение для vatrikovsky Посмотреть профиль Найти все сообщения от vatrikovsky
 
Регистрация: 27.10.2010
Сообщений: 3

Ну естественно, на область со списком. Вот даже конкретно на этот блок:
$('#left_list')
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
mouseover, mouseout - не распространяется на дочерние элементы barmaley Events/DOM/Window 31 01.06.2017 08:52
Как прокрутить скролл до элемента PAMAC Общие вопросы Javascript 2 04.10.2010 08:56
mouseover в ie slonik_mak jQuery 6 02.08.2010 23:05
эмуляция mouseover zampolit Events/DOM/Window 3 07.03.2010 22:31
Плавный скролл колёсиком Alerto Элементы интерфейса 5 27.08.2009 10:46