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，因爲可能有一些我沒有想到的，這代碼可怕的失敗。