拖拽进度条，可做视频进度条，音量拖拽条等
- HTML部分
<div class="slide-box"><div class="slide"></div></div>
- css样式
.slide-box {
width: 100%;
height: 3px;
background-color: #eee;
border-radius: 10px;
position: absolute;
bottom: 70px;
}
.slide {
width: 0px;
height: 6px;
/* line-height: 10px; */
margin-top: -1px;
position: absolute;
top: 0;
left: 0;
background-color: blue;
border-radius: 10px;
z-index: 99;
}
- js部分
先获取所需元素
var dis1 = document.getElementsByClassName('slide-box')[0];
var slide1 = document.getElementsByClassName('slide')[0];
//获取播放进度条的运动范围
function playTime(time1) {
// var playMaxW = dis1.offsetWidth - slide1.offsetWidth;
var playMaxW = dis1.offsetWidth;
br>//获取播放进度条的比例
var playSecl = vid.currentTime / vid.duration;
//赋值
// slide1.style.left = playSecl * playMaxW + 'px';
slide1.style.width = playSecl * playMaxW + 'px';
}
function changeTime(isNum) {
isNum = parseInt(isNum); //取整
//获取时
var hours = setZero(Math.floor(isNum / 3600));
//获取分
var mins = setZero(Math.floor(isNum % 3600 / 60));
//获取秒
var secs = setZero(Math.floor(isNum % 60));
return hours + ':' + mins + ':' + secs;
}
//当前时小于10的话添加'0'
function setZero(num) {
return num = num <= 9 ? '0' + num : num;
}
function slide() {
slide1.onmousedown = function(ev) {
console.log('aaa');
var ev = ev || window.event;
ev.preventDefault();
// var disX = ev.clientX - slide1.offsetLeft;
var disX = ev.clientX;
document.onmousemove = function(ev) {
var ev = ev || window.event;
ev.preventDefault();
var x = ev.clientX - disX;
// var maxW = dis1.offsetWidth - slide1.offsetWidth;
var maxW = dis1.offsetWidth;
if (x < 0) {
x = 0;
} else if (x > maxW) {
x = maxW;
}
// slide1.style.left = x + 'px';
slide1.style.width = x + 'px';
var secl = x / maxW;
vid.currentTime = secl * vid.duration;
playTime();
}
document.onmouseup = function() {
document.onmousemove = null;
}
return false;
}
}
slide();
