jquery - 如何在 jQuery 中鼠标按下时滚动 div？

Question

我想要完成的是仅在鼠标按钮按下时滚动红色栏中的指示器（见图）。

这是我的 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);
            }

        });
    }
});

但滑块只是保持静止。我怎样才能做到这一点？

小提琴：http: //jsfiddle.net/Bebbie7/zf69Q/

Answer 1

问题是您的 while 循环将在 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);
        }
    }
});

演示：http: //jsfiddle.net/zf69Q/1/