1

ビデオ プレーヤー用のカスタム ボリューム バーを作成しています。すべて正常に動作しますが、コントロールをドラッグしたときに音量が変化する方向を逆にしようとしています。位置を計算してパーセンテージに変換すると、コントロール div の上部が 0% で下部が 100% と計算されるという事実に関係していると思います。位置とパーセンテージは次のように計算されます。

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

コントロール div の下部をクリックすると、console.log(position); 100% を読み取ります。0% を読み上げたいので、下部をクリックすると音量が下がり、上部をクリックすると音量が上がります (100% まで)。

コードはこちら

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

これにはjQuery UIスライダーを使用したくありません。単純なロジックにすぎない気がします。ありがとう！

4

1 に答える 1

4

変わらない：

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

に

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

やれ？

于 2012-04-10T17:21:20.410 に答える