Javascript.RU

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

Останавливаем обработку события
Всем привет! Возникла необходимость создать горизонтальную ленту фотографий, которая длиннее чем экран. СМысл в том что часть ленты показывается, снизу выводится полоса прокрутки, с помощью которой можно прокрутить всю ленту. Так как стандартная полоса прокрутки практически не имеет настроек, то было решено писать свою. В общем виде она представляет собой фиксированный див(С моим фоном), в который вложен другой див(собственно сама полоса прокрутки), ездящий за курсором мыши. Столкнулся со следующей проблемой. Нажимаю левую кнопку мыши, запускается отслеживание мыши, див прекрасно бегает за мышью, галерея крутится, все ништяк, НО! Отпускаю кнопку мыши, див все равно продолжает бегать за мышкой. Нужно его как-то остановить. Может кто сталкивался с подобным?
$(document).ready(function(){
	var n = $(".top_tour").length; //Считаем количество блоков с фотками
	var lenta_width = 176 * n + (n - 1) * 5; //Считаем длину блока с фотками(учитываем расстояние между блоками в 5 px)
	var prop = 900 / lenta_width;   //Считаем отношение видимой длины ленты ко всей длине ленты(Для рассчета длины полосы прокрутки. Больше фоток - короче полоса)
	var scroll_width = 850 * prop; //Собственно высчитываем длину полосы прокрутки
	var max_margin = 850 - scroll_width; //Высчитываем максимальную длину, на которую может отступить слайдер(Чтоб не вылазил за пределы родителя справа)
	var k = lenta_width / 850; //Коэффициент скорости прокрутки. Чтоб конец прокрутки точно соответствовал концу ленты с фотками.
	$("#slider").css({"width":scroll_width + "px"}).mousedown(function(position){   //ПРинажатии мышки на слайдере делаем:
		var start = position.pageX; //Запоминаем положение мыши
		var slider_pos = $(this).css("left"); //Запоминаем положение слайдера
		slider_pos = slider_pos.substr(0, slider_pos.length - 2); //Отсекаем "px" из позиции слайдера
		$("body").mousemove(function(event){ //При движении мыши происходит:
			var move = event.pageX - start; //Считаем насколько сдвинулась мышь относительно стартового положения
			
				$("#slider").css({"left":slider_pos + move + "px"});  //Сдвигаем слайдер на такое-же расстояние
				$(".top_tour:first").css({"margin-left":"-" + move * k + "px"});  //Сдвигаем в обратную сторону галлерею с учетом коэффициента ее длины	
		});			
	});
$("body").mouseup(function(e){  // ПРи отпускании кнопки мыши пытаемся остановить выполнение события, нифига не работает(((
	e.stopPropagation();								
});
Ответить с цитированием
  #2 (permalink)  
Старый 07.08.2012, 09:39
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

можно так делать
объявляем var pr=0;
далее
...onmousedown=function(){pr=1;...
..onmousemove=function(){if(pr!=1)return;...
..onmouseup=function(e){pr=0;..
Ответить с цитированием
  #3 (permalink)  
Старый 07.08.2012, 11:51
Интересующийся
Отправить личное сообщение для OlegDegtev Посмотреть профиль Найти все сообщения от OlegDegtev
 
Регистрация: 07.08.2012
Сообщений: 13

Спасибо большое, помогло!!!! ПРавда повылазила большая куча недочётов в скрипте еще)
Ответить с цитированием
  #4 (permalink)  
Старый 07.08.2012, 13:06
Интересующийся
Отправить личное сообщение для OlegDegtev Посмотреть профиль Найти все сообщения от OlegDegtev
 
Регистрация: 07.08.2012
Сообщений: 13

Вобщем если кому интересно, выкладываю финальную версию скрипта. 2 дня с ним мучался. Он не претендует на отсутствие ошибок,так как я начинающий в jquery, но в интернете ничего другого все равно нету. Окошко ленты шириной 900px позишн релатив оверфлоу хидден. Внутри окошка - сама лента произвольной длины, позишн абсолют, фотки шириной 174, расстояние между фотками 5. ПОдкладка под слайдер(область где он может ездить) 850px. У нее тоже позишн релатив, у слайдера абсолют. Есть подкладка("#cover"), закрывающая собой весь документ, чтоб вы таская нажатой кнопкой мыши слайдер не выделяли текст и всякие элементы рядом со слайдером.
$(document).ready(function(){
	var lenta_width = $("#lenta").width();
	var slider_width = parseInt(850 * 900 / lenta_width);
	var max_left = 850 - slider_width;
	var max_lenta_left = lenta_width - 900;
	var k = lenta_width / 850;
	var pr = 0;
	$("#slider").css({"width":slider_width + "px"}).mousedown(function(position){		
		pr = 1;
		var height = $(document).height();
		$("#cover").css({"height":height+"px", "display":"block"});
		var start = position.pageX; 
		var slider_start = $(this).css("left");
		var lenta_start = $("#lenta").css("left");
		slider_start = parseInt(slider_start);
		lenta_start = parseInt(lenta_start);		
		$("body").mousemove(function(event){
			if (pr != 1)
				{return;}
			var move = event.pageX - start;
			var left = slider_start + move;
			var lenta_left = lenta_start - move * k;
			if (left < 0)
			{
				left = 0;
				lenta_left = 0;
			}
			if (left > max_left)
			{
				left = max_left;
				lenta_left = 0 - max_lenta_left;
			}
				$("#slider").css({"left":left + "px"});
				$("#lenta").css({"left":lenta_left +"px"});					
		});			
	});
	$("body").mouseup(function(){
		pr = 0;
		$("#cover").css({"display":"none"});								
	});
	
});

Надеюсь кому-нибудь мой метод поможет)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Дебаг js, или как найти обработчик события для тега jimm88 Events/DOM/Window 1 18.04.2012 14:11
Как правильно прицепить обработку события slowklg Events/DOM/Window 6 15.03.2012 14:20
Передача параметров в колбэки и дальнейшее их вешанье на события. Gremlin Общие вопросы Javascript 17 13.08.2011 07:54
Drug&Drop + всплывание события = проблемы =(( _NoName_ Events/DOM/Window 4 05.03.2009 16:47
Отменить обработку события Fr0sT Events/DOM/Window 7 24.12.2008 12:18