javascript - jQuery 音量 slider

Question

我好像找不到解决办法。请帮助我。

我想做的是有一个简单的音量 slider 。

所以，如您所见，橙色部分是我的音量 slider 。

这是我的 jQuery:

var mouseDown = false;

$("#volSlider").mousedown(function() { mouseDown = true; });
$("#volSlider").mouseup(function() { mouseDown = false; });
$("#volSlider").mouseleave(function() { mouseDown = false; });

$("#controlVolume").mousemove(function(e) 
{
    if (mouseDown == true) 
    {
        var caretFromTop = $("#volCaret").position().top;
        var areaHeight = $("#volSlider").height();
        var volume = (caretFromTop / areaHeight) * 100;
        volume = Math.round(volume);

        $("#volCaret").css("bottom", volume);
        $("#volText").text(volume);

        if (volume <= 100 && volume >= 0)
        {
            //To be added.
        }
    }
});

编辑:对于那些想看我的 HTML 的人:

    <div id="controlVolume">
    <div id="volSlider">
        <div id="volCaret"></div>
    </div>
    <div id="volText"></div>
</div>

当我尝试将插入符号拖到顶部时，它只是转到“1”而不是更远。我有什么想念的吗？提前致谢。

Answer 1

您真正想要做的是跟踪鼠标的 Y 顶点，而不是插入符号的高度(好吧，从技术上讲是的——插入符号的高度在鼠标移动之间发生变化)。您当前正在跟踪音量条的位置，该位置不会改变。

因此你的代码应该是这样的:

var mousePos = 0;
var mouseDown = false;
var height = 0;

$("#volSlider").mousedown(function(e) { mouseDown = true; mousePos = e.pageY; height = $("#volCaret").height(); });
$("#volSlider").mouseup(function() { mouseDown = false; mousePos = 0 });
$("#volSlider").mouseleave(function() { mouseDown = false; mousePos = 0 });

$("#controlVolume").mousemove(function(e) 
{
    if (mouseDown == true) 
    {
        var areaHeight = $("#volSlider").height();
        var caretHeight = height + (e.pageY - mousePos);
        $("#volCaret").height(caretHeight ); 

        var volume = caretHeight / areaHeight * 100;
        console.log(volume);

    }
});

如果您将您的代码放在 jsfiddle 上，那就太好了，因为可能有一些我没有想到的东西，并且这段代码非常失败。