自定義可拖動的進度條,如下圖效果: 代碼分三部分 HTML CSS 到這步就基本實現了自定義的樣式,只需改變 .progress-bar 的 width 就能顯示不同的進度;接下來給進度條加上拖動事件 JavaScript 關於本篇隨筆,作者的考慮: 1. 將 mousedown 事件綁定在進度條的 ...
自定義可拖動的進度條,如下圖效果:
代碼分三部分
HTML
1 <body> 2 <div id="demo"> 3 4 <div class="progress"> 5 <div class="progress-bar"> 6 <div class="progress-thumb"></div> 7 </div> 8 </div> 9 10 </div> 11 </body>
CSS
1 #demo { 2 width: 600px; height: 100px; margin: 100px auto; 3 display: flex; align-items: center; 4 } 5 6 #demo .progress { 7 width: 100%; height: 6px; border-radius: 3px; 8 background: #F1F5FD; 9 } 10 11 #demo .progress .progress-bar { 12 width: 40%; height: 100%; border-radius: 3px; 13 background: #0072FF; 14 } 15 16 #demo .progress .progress-bar .progress-thumb { 17 width: 14px; height: 14px; border-radius: 50%; 18 background: #FFFFFF; box-shadow: 0 0 15px 5px #0072FF; 19 float: right; 20 position: relative; left: 7px; top: -5px; 21 }
到這步就基本實現了自定義的樣式,只需改變 .progress-bar 的 width 就能顯示不同的進度;接下來給進度條加上拖動事件
JavaScript
1 <script> 2 3 var slider = { 4 use: function(id) { 5 var self = this; 6 self.slider = document.getElementById(id); 7 self.bar = self.slider.querySelector('.progress-bar'); 8 self.thumb = self.slider.querySelector('.progress-thumb'); 9 self.slider.addEventListener('mousedown', function(e) { 10 if (e.button == 0) { // 判斷點擊左鍵 11 self.mDown = true; 12 self.beginX = e.offsetX; 13 self.positionX = e.offsetX; 14 self.beginClientX = e.clientX; 15 self.sliderLong = parseInt(self.getStyle(self.slider, 'width')); 16 var per = parseInt(self.positionX / self.sliderLong * 100); 17 self.bar.style.width = per + '%'; 18 } 19 }); 20 document.addEventListener('mousemove', function(e) { 21 if (self.mDown) { 22 var moveX = e.clientX - self.beginClientX; 23 self.positionX = (self.beginX + moveX > self.sliderLong) ? self.sliderLong : (self.beginX + moveX < 0) ? 0 : self.beginX + moveX; 24 var per = parseInt(self.positionX / self.sliderLong * 100); 25 self.bar.style.width = per + '%'; 26 } 27 }); 28 document.addEventListener('mouseup', function(e) { 29 if (e.button == 0) { 30 self.mDown = false; 31 } 32 }); 33 }, 34 getStyle: function(obj,styleName){ // 獲取元素樣式的方法 35 if(obj.currentStyle){ 36 return obj.currentStyle[styleName]; 37 }else{ 38 return getComputedStyle(obj,null)[styleName]; 39 } 40 } 41 }; 42 slider.use('demo'); 43 44 </script>
關於本篇隨筆,作者的考慮:
1. 將 mousedown 事件綁定在進度條的包裹層而非進度條本身,這是參考了主流視頻播放器的效果後的設計,為了優化用戶體驗;
2. JS 用純原生語法書寫,如果用 JQuery 可以簡化選擇器和 CSS 樣式的獲取;
3. 滑鼠在滾動條外的移動,本文使用 clientX 來計算,如果有其他想法歡迎留言探討