反転垂直ボリュームバーjquery

Question

ビデオプレーヤー用のカスタムボリュームバーを作成しています。すべて正常に動作しますが、コントロールがドラッグされたときにボリュームが変化する方向を反転しようとしています。ポジションを計算してパーセンテージに変換すると、コントロールdivの上部が0％、下部が100％と計算されているという事実と関係していると思います。制御DIVの底がクリックされた場合（位置）CONSOLE.LOG、

var position = y - volume.offset().top; 
percentage = 100 * position/volume.height(); 

;位置及びパーセンテージはにより計算されます100％を読み込みます。 0％を読みたいので、下をクリックすると音量が下がり、上をクリックすると100％になります。

相続人は、私はこのためのjQuery UIのスライダーを使用したくないコード

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'}); 

。私はそれがちょっと単純なロジックだと感じています。ありがとう！

Answer 1

は変更はないでしょう：

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

を

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

にそれを行いますか？