问题描述
我正在尝试制作一个垂直滑块来控制我在背景中的音频音量,它应该可以工作,但我有两个问题: 一个是由于某种原因它不跟随鼠标位置,另一个是拖动的大问题。第一次拖动不显示,但是一旦我再次拖动它不会在释放鼠标时停止,并且我无法单击页面中的其余内容。任何人都可以帮我解决这个问题吗?我仍然是 Javascript 的初学者。 提前致谢!
var e = document.querySelector('.volume-slider-con');
var eInner = document.querySelector('.volume-slider');
var audio = document.querySelector('audio');
var drag = false;
e.addEventListener('mouseup',function(ev){
drag = true;
updateBar(ev.clientY);
});
document.addEventListener('mousemove',function(ev){
if(drag){
updateBar(ev.clientY);
}
});
document.addEventListener('mousdown',function(ev){
drag = false;
});
var updateBar = function (y,vol) {
var volume = e;
var percentage;
if (vol) {
percentage = vol * 100;
} else {
var position = y - volume.offsetTop;
percentage = 100 - (25 * position / volume.clientHeight);
}
if (percentage > 100) {
percentage = 100;
}
if (percentage < 0) {
percentage = 0;
}
eInner.style.width = percentage +'%';
audio.volume = percentage / 100;
};
.volume-slider-con{
height:15px;
width:10%;
margin-top: 255px;
margin-left: 106px;
position:relative;
background-color: #000000;
transform: rotate(270deg);
border-radius: 2px;
}
.volume-slider{
height:100%;
width:100%;
position:relative;
background-color: #ffffff;
border-radius: 2px;
}
<div class="volume-slider-con">
<div class="volume-slider"></div>
</div>
解决方法
您可以考虑使用 <input type="range">
并通过 css transform 将其旋转 90 度,而不是完全从头开始构建。
然后,您也可以使用事件侦听器对输入和更改执行操作。
On input 事件只要滑块滑过范围(拖动时)就会运行,并连续返回滑块位置的值。 一旦滑块被释放,更改事件只会运行一次。