jQuery Volume Slider

Question

似乎我无法找到解决方案。请帮帮我。

我想要的是拥有一个简单的音量滑块。

所以，你可以看到橙色部分是我的音量滑块。

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

当我尝试将插入符号拖到顶部时，它只会转到＆＃34; 1＆＃34;而不是进一步。我错过了什么？提前谢谢。

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上会很棒，因为我可能没有想到这些代码，而且这些代码可能会失败。