首頁 >web前端 >js教程 >如何使用javascript+css實作自訂拖曳進度條（程式碼）

如何使用javascript+css實作自訂拖曳進度條（程式碼）

不言原創: 2018-09-15 15:20:162432瀏覽

本篇文章帶給大家的內容是關於如何使用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(&#39;.progress-bar&#39;);
                self.thumb = self.slider.querySelector(&#39;.progress-thumb&#39;);
                self.slider.addEventListener(&#39;mousedown&#39;, 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, &#39;width&#39;));
                        var per = parseInt(self.positionX / self.sliderLong * 100);
                        self.bar.style.width = per + &#39;%&#39;;
                    }
                });
                document.addEventListener(&#39;mousemove&#39;, 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 + &#39;%&#39;;
                    }
                });
                document.addEventListener(&#39;mouseup&#39;, 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(&#39;demo&#39;);
    </script>

說明：

1. 將mousedown 事件綁定在進度條的包裹層而非進度條本身，這是參考了主流影片播放器的效果後的設計，為了優化使用者體驗；

2. JS 用純原生語法書寫，如果用JQuery 可以簡化選擇器和CSS 樣式的取得；

3. 滑鼠在滾動條外的移動，本文使用clientX 來計算。

以上是如何使用javascript+css實作自訂拖曳進度條（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何在vue中安裝vux的元件（步驟）下一篇：如何在vue中安裝vux的元件（步驟）

看更多