进度条拖拽效果

在音乐播放器中，音量和进度都是以进度条的形式显示和设置，所以进度条的拖拽效果还是比较重要的。一下以音量条部分为例：

html和css部分

<div id="volume">
    <div id="setVolume">
        <div id="setVolumeBtn"></div>
    </div>
</div>

#volume {
    width: 100px;
    height: 3px;
    background-color: #e0e0e0;
    margin: 10px 0;
}
#setVolume {
    width: 30%;
    height: 100%;
    background-color: #D2413A;
    position: relative;
}
#setVolumeBtn {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #D2413A;
    position: absolute;
    right: -4px;
    top: -2px;
    cursor: pointer;
    display: none;
}

js部分

var totalVolume = document.getElementById("volume");
var volume = document.getElementById("setVolume");
var setVolumeBtn = document.getElementById("setVolumeBtn");

//拖动设置音量
setVolumeBtn.onmousedown = function (event) {
    var e = event || window.event;
    document.onmousemove = function () {
        changeVolume();
    };
};
//拖动后弹起鼠标不做任何操作
document.onmouseup = function () {
    document.onmousemove = null;
};
//点击音量条跳至相应音量
totalVolume.onclick = function () {
    changeVolume();
};
//鼠标进入音量条时出现按钮
totalVolume.onmouseover = function () {
    setVolumeBtn.style.display = "block";
};
//鼠标离开音量条时按钮消失
totalVolume.onmouseout = function () {
    setVolumeBtn.style.display = "none";
};

//音量改变
function changeVolume(event) {
    var e = event || window.event;
    var volumeWidth = 0;
    volumeWidth = e.clientX - totalVolume.offsetLeft;
    if (volumeWidth < 0) {
        volumeWidth = 0;
    } else if (volumeWidth > totalVolume.offsetWidth) {
        volumeWidth = totalVolume.offsetWidth;
    }
    volume.style.width = volumeWidth + "px";
    setVolume();
}

//音量-宽度转换
function setVolume() {
    var theTotalWidth = totalVolume.offsetWidth;
    var theWidth = volume.offsetWidth;
    audio.volume = theWidth / theTotalWidth;
}