jQuery卷滑块

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> 

当我尝试插入符号拖到顶部，它只是为“ 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，因为可能有一些我没有想到的，这代码可怕的失败。