Как прокрутить div, когда мышь в jQuery?

enter image description here Я хочу выполнить прокрутку индикатора на красной полосе только при нажатии кнопки мыши (см. Изображение).Как прокрутить div, когда мышь в jQuery?

Это мой JQuery код:

var offset = 0; 
var mouseDown = false; 

$(document).ready(function() { 
    $("#RedScroller").mousedown(function() { 
     mouseDown = true; 
    }); 

    $("#RedScroller").mouseup(function() { 
     mouseDown = false; 
    }); 

    while (mouseDown == true) 
    { 
     $("#RedSlider").mousemove(function(e) { 
      var offset = $(this).offset(); 
      offset = e.pageX - offset.left; 
      if (offset <= 255 && offset >= 0) 
      { 
       $("#RedScroller").css("left", offset); 
       $("#ColorDisplay").text(offset); 
      } 

     }); 
    } 
});

Но слайдер просто держит до сих пор. Как это сделать?

Fiddle: http://jsfiddle.net/Bebbie7/zf69Q/

источник

2013-09-25 Frederik Moller

Вы можете добавить jsFiddle? –

В то время как только когда документ готов, вы должны поместить его в функцию или привязать ее к мыши или что-то еще. –

Вместо использования цикла while, возможно, используйте событие MouseMove и проверьте, не указана ли мышь. –

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

$("#RedScroller").mousedown(function() { 
    mouseDown = true; 
}); 

$("#RedScroller").mouseup(function() { 
    mouseDown = false; 
}); 

$("#RedSlider").mousemove(function(e) { 
    if(mouseDown == true) { 
     var offset = $(this).offset(); 
     offset = e.pageX - offset.left; 
     if (offset <= 255 && offset >= 0) 
     { 
      $("#RedScroller").css("left", offset); 
      $("#ColorDisplay").text(offset); 
     } 
    } 
});

Demo: http://jsfiddle.net/zf69Q/1/

источник

2013-09-25 15:36:11 techfoobar

Спасибо, не знаю, почему я этого не видел ... на самом деле так просто! –

Как прокрутить div, когда мышь в jQuery?

ответ

Смежные вопросы