Javascript jQuery卷滑块

看来我找不到解决办法。请帮帮我

我想做的是有一个简单的音量滑块

如你所见，橙色部分是我的音量滑块

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

var mouseDown=false；
$（“#volSlider”）.mousedown（函数（）{mousedown=true；}）；
$（“#volSlider”）.mouseup（函数（）{mouseDown=false；}）；
$（“#volSlider”）.mouseleave（function（）{mouseDown=false；}）；
$（“#控制音量”）.mousemove（函数（e）
{
if（mouseDown==true）
{
var caretFromTop=$（“#volCaret”）.position（）.top；
var areaHeight=$（“#volSlider”）.height（）；
var体积=（顶部插入/区域高度）*100；
音量=数学四舍五入（音量）；
$（“volCaret”）.css（“底部”，卷）；
$（#volText”）.text（卷）；
如果（体积=0）
{
//待补充。
}
}
});

编辑：对于希望查看我的HTML的用户：

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

---

当我尝试将插入符号拖动到顶部时，它只会转到“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);

    }
});

---

如果您将代码放在JSFIDLE上，那就太好了，因为可能有一些我没有想到的东西，而这段代码失败得很厉害。

%

表示模运算。我想你想成倍增长？对不起，是的，那是个打字错误。它实际上是一个“*”而不是一个“%”来在JSFIDLE上放置一个工作示例，需要我重做大部分内容才能使其工作，因为这是一个很大的项目。我已经试过你的代码，它似乎在某种意义上起作用，但插入符号的高度会发生变化。它只会变到底部。。。这意味着它将从“volSlider”滑到底部。没有ups。给你-工作JSFIDLE:。如果你能进一步解释你的问题，这肯定是另外一回事。工作得很好。非常感谢。