1
我为视频播放器创建自定义音量栏。一切工作正常,但即时通讯尝试反转控制拖动时的音量变化的方向。我认为这与事实有关,当我计算位置并将其转换为百分比时,计算出我的控制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的滑块这一点。我有一种感觉,这只是一些简单的逻辑。谢谢!
不会改变'百分比= 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