自定義可拖動的進度條，如下圖效果：
代碼分三部分
html
<body>
<div id="demo">
<div class="progress">
<div class="progress-bar">
<div class="progress-thumb"></div>
</div>
</div>
</div>
</body>
css
#demo {
width: 600px; height: 100px; margin: 100px auto;
display: flex; align-items: center;
}
#demo .progress {
width: 100%; height: 6px; border-radius: 3px;
background: #F1F5FD;
}
#demo .progress .progress-bar {
width: 40%; height: 100%; border-radius: 3px;
background: #0072FF;
}
#demo .progress .progress-bar .progress-thumb {
width: 14px; height: 14px; border-radius: 50%;
background: #FFFFFF; box-shadow: 0 0 15px 5px #0072FF;
float: right;
position: relative; left: 7px; top: -5px;
}
Pexelshttps://www.wode007.com/sites/73241.html 天堂圖片網https://www.wode007.com/sites/73243.html
到這步就基本實現了自定義的樣式，只需改變 .progress-bar 的 width 就能顯示不同的進度；接下來給進度條加上拖動事件
JavaScript
<script>
var slider = {
use: function(id) {
var self = this;
self.slider = document.getElementById(id);
self.bar = self.slider.querySelector('.progress-bar');
self.thumb = self.slider.querySelector('.progress-thumb');
self.slider.addEventListener('mousedown', function(e) {
if (e.button == 0) { // 判斷點擊左鍵
self.mDown = true;
self.beginX = e.offsetX;
self.positionX = e.offsetX;
self.beginClientX = e.clientX;
self.sliderLong = parseInt(self.getStyle(self.slider, 'width'));
var per = parseInt(self.positionX / self.sliderLong * 100);
self.bar.style.width = per + '%';
}
});
document.addEventListener('mousemove', function(e) {
if (self.mDown) {
var moveX = e.clientX - self.beginClientX;
self.positionX = (self.beginX + moveX > self.sliderLong) ? self.sliderLong : (self.beginX + moveX < 0) ? 0 : self.beginX + moveX;
var per = parseInt(self.positionX / self.sliderLong * 100);
self.bar.style.width = per + '%';
}
});
document.addEventListener('mouseup', function(e) {
if (e.button == 0) {
self.mDown = false;
}
});
},
getStyle: function(obj,styleName){ // 獲取元素樣式的方法
if(obj.currentStyle){
return obj.currentStyle[styleName];
}else{
return getComputedStyle(obj,null)[styleName];
}
}
};
slider.use('demo');
</script>
關於本篇隨筆，作者的考慮：
1. 將 mousedown 事件綁定在進度條的包裹層而非進度條本身，這是參考了主流視頻播放器的效果后的設計，為了優化用戶體驗
2. js 用純原生語法書寫，如果用 JQuery 可以簡化選擇器和 css 樣式的獲取
3. 鼠標在滾動條外的移動，本文使用 clientX 來計算