資訊專欄INFORMATION COLUMN
摘要：自定義可拖動的進(jìn)度條，如下圖效果代碼分三部分到這步就基本實(shí)現(xiàn)了自定義的樣式，只需改變的就能顯示不同的進(jìn)度接下來給進(jìn)度條加上拖動事件
自定義可拖動的進(jìn)度條，如下圖效果：
代碼分三部分
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 }
到這步就基本實(shí)現(xiàn)了自定義的樣式，只需改變 .progress-bar 的 width 就能顯示不同的進(jìn)度；接下來給進(jìn)度條加上拖動事件
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) { // 判斷點(diǎn)擊左鍵 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>
關(guān)于本篇隨筆，作者的考慮：
1. 將 mousedown 事件綁定在進(jìn)度條的包裹層而非進(jìn)度條本身，這是參考了主流視頻播放器的效果后的設(shè)計(jì)，為了優(yōu)化用戶體驗(yàn)；
2. JS 用純原生語法書寫，如果用 JQuery 可以簡化選擇器和 CSS 樣式的獲取；
3. 鼠標(biāo)在滾動條外的移動，本文使用 clientX 來計(jì)算，如果有其他想法歡迎留言探討
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1800.html
摘要：事件響應(yīng)式進(jìn)度條的應(yīng)用場景主要是自定義播放器的進(jìn)度條。效果圖以上就是可以利用本組件實(shí)現(xiàn)的一些效果，他們都能響應(yīng)和兩種事件。部分對現(xiàn)在就有需求使用這個(gè)帶事件的進(jìn)度條的同學(xué)來說，看看這部分，可以幫助你自己修改完善它。 寫在前面 找了很多vue進(jìn)度條組件，都不包含拖拽和點(diǎn)擊事件，input range倒是原生包含input和change事件，但是直接基于input range做進(jìn)度條的...
摘要：步驟設(shè)置控件監(jiān)聽事件，重新生成驗(yàn)證區(qū)域在文件中添加控件在文件中添加控件，用于顯示旋轉(zhuǎn)驗(yàn)證的動態(tài)效果。先實(shí)例化一個(gè)隨機(jī)數(shù)對象，用于后續(xù)計(jì)算隨機(jī)生成的旋轉(zhuǎn)驗(yàn)證塊角度值。 前言基于安卓平臺的滑動拼## 二級標(biāo)題圖驗(yàn)證組件SwipeCaptcha（https://github.com/mcxtzhang/SwipeCa...
摘要：先看一下效果點(diǎn)擊這里查看當(dāng)然源代碼也都在這個(gè)文件里啦功能播放暫停音頻軌跡隨意拖動播放時(shí)間及總時(shí)間靜音實(shí)現(xiàn)邏輯當(dāng)然最終還是使用的的的相關(guān)實(shí)現(xiàn)的首先寫好播放器相關(guān)的樣式并且隱藏默認(rèn)的播放器然后就是一步步實(shí)現(xiàn)邏輯啦播放暫停播放音頻暫停音頻音頻的播 先看一下效果: 點(diǎn)擊這里查看DEMO, 當(dāng)然源代碼也都在這個(gè)文件里啦; showImg(https://segmentfault.com/img/...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3785·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3558·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
