倒立垂直音量棒jquery

我为视频播放器创建自定义音量栏。一切工作正常，但即时通讯尝试反转控制拖动时的音量变化的方向。我认为这与事实有关，当我计算位置并将其转换为百分比时，计算出我的控制div的顶部为0％，底部为100％。位置和百分比计算公式如下：倒立垂直音量棒jquery

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的滑块这一点。我有一种感觉，这只是一些简单的逻辑。谢谢！

来源

2012-04-10 cl0udc0ntr0l

不会改变'百分比= 100 *位置/ volume.height（）;'到'百分比= 100 - （100 *位置/ volume.height（））;'做到这一点？ – j08691 2012-04-10 17:10:26

谢谢！我一直盯着这太久了。它的工作原理<3 – cl0udc0ntr0l 2012-04-10 17:17:08

没问题，我已经发布它作为答案。 – j08691 2012-04-10 17:21:31

会不会发生变化：

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

到

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

办呢？

来源

2012-04-10 17:21:20 j08691

倒立垂直音量棒jquery

回答

相关问题