Invertierte vertikale Lautstärkeleiste jquery

Question

Im Erstellen einer benutzerdefinierten Lautstärkeleiste für einen Video-Player. Alles funktioniert gut, aber ich versuche die Richtung zu ändern, in der sich die Lautstärke ändert, wenn das Steuerelement gezogen wird. Ich denke, dass es damit zu tun hat, dass wenn ich die Position berechne und diese in einen Prozentsatz umrechne, es berechnet, dass der obere Teil meines Kontrolldivos 0% und der untere 100% ist. Die Position und der Prozentsatz werden wie folgt berechnet:

Wenn unten auf das Steuerelement div geklickt wird, console.log (Position); liest 100% vor. Ich möchte, dass es 0% ausgibt, also wenn der Boden angeklickt wird, sinkt die Lautstärke und wenn der obere Rand angeklickt wird, geht es nach oben (auf 100%).

Heres der Code

HTML

<video id="video"> 
... video sources 
</video> 
<div id="volumeBar"></div> 
<div id="volume"></div> 

CSS

#volumeBar { 
    position: relative; 
    height: 138px; 
    width: 102px; 
    background: url(/assets/vintage-vp/volume-container.png) no-repeat; 
    top: -131px; 
    left: 695px; 
    z-index: 2; 
overflow: hidden; 
} 

#volume { 
    width: 36px; 
    height: 79px; 
    position: absolute; 
    background: url(/assets/vintage-vp/volume.jpg) no-repeat black; 
top: 116px; 
    left: 735px; 
    z-index: 1; 
} 

jQuery

var volumeDrag = false; 
$('#volumeBar').on('mousedown', function(e) { 
    volumeDrag = true; 
    video[0].muted = false; 
    updateVolume(e.pageY); 
}); 
$(document).on('mouseup', function(e) { 
    if(volumeDrag) { 
     volumeDrag = false; 
     updateVolume(e.pageY); 
    } 
}); 
$(document).on('mousemove', function(e) { 
    if(volumeDrag) { 
     updateVolume(e.pageY); 
    } 
}); 
var updateVolume = function(y, vol) { 
    var volume = $('#volumeBar'); 
    var percentage; 
    //if only volume have specificed 
    //then direct update volume 
    if(vol) { 
     percentage = vol * 100; 
    } 
    else { 
     var position = y - volume.offset().top; 
     percentage = 100 * position/volume.height(); 
    } 

    if(percentage > 100) { 
     percentage = 100; 
    } 
    if(percentage < 0) { 
     percentage = 0; 
    } 

    //update video volume 

    video[0].volume = percentage/100; 

    //change sound icon based on volume 

    var roundPixels = Math.round((video[0].volume*10))*-79; 
    $('#volume').css({backgroundPosition: '0 ' +roundPixels+'px'}); 

Ich möchte nicht jQuery UI Slider für diesen Einsatz. Ich habe das Gefühl, es ist nur eine einfache Logik. Vielen Dank!

Answer 1

Würde nicht zu ändern:

percentage = 100 * position/volume.height(); 

zu

percentage = 100 - (100 * position/volume.height()); 

es tun?