Всем привет! Возникла необходимость создать горизонтальную ленту фотографий, которая длиннее чем экран. СМысл в том что часть ленты показывается, снизу выводится полоса прокрутки, с помощью которой можно прокрутить всю ленту. Так как стандартная полоса прокрутки практически не имеет настроек, то было решено писать свою. В общем виде она представляет собой фиксированный див(С моим фоном), в который вложен другой див(собственно сама полоса прокрутки), ездящий за курсором мыши. Столкнулся со следующей проблемой. Нажимаю левую кнопку мыши, запускается отслеживание мыши, див прекрасно бегает за мышью, галерея крутится, все ништяк, НО! Отпускаю кнопку мыши, див все равно продолжает бегать за мышкой. Нужно его как-то остановить. Может кто сталкивался с подобным?
$(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();
});