如何使用javascript+css實現自定義拖動進度條（代碼）

來源：懂視網責編：小采時間：2020-11-27 19:30:33

如何使用javascript+css實現自定義拖動進度條（代碼）

如何使用javascript+css實現自定義拖動進度條（代碼）:本篇文章給大家帶來的內容是關于如何使用javascript+css實現自定義拖動進度條（代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。自定義可拖動的進度條，如下圖效果：代碼分三部分HTML<body> <div id="

推薦度：

點擊下載本文 文檔為doc格式

導讀如何使用javascript+css實現自定義拖動進度條（代碼）:本篇文章給大家帶來的內容是關于如何使用javascript+css實現自定義拖動進度條（代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。自定義可拖動的進度條，如下圖效果：代碼分三部分HTML<body> <div id="

本篇文章給大家帶來的內容是關于如何使用javascript+css實現自定義拖動進度條（代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

自定義可拖動的進度條，如下圖效果：

代碼分三部分

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; 
}

到這步就基本實現了自定義的樣式，只需改變 .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 來計算。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com