ホームページ > 記事 > ウェブフロントエンド > JavaScript+CSSを使用してカスタムドラッグプログレスバーを実装する方法（コード）

JavaScript+CSSを使用してカスタムドラッグプログレスバーを実装する方法（コード）

不言オリジナル: 2018-09-15 15:20:162347ブラウズ

この記事の内容は、JavaScript CSS を使用してカスタムドラッグプログレスバー (コード) を実装する方法に関するものです。必要な方は参考にしていただければ幸いです。

以下に示すように、ドラッグ可能な進行状況バーをカスタマイズします。

コードは 3 つの部分に分かれています

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 の幅を変更するだけです。

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. プログレスバー自体ではなく、マウスダウンイベントをプログレスバーのラッピングレイヤーにバインドします。これがデザインです。ユーザーエクスペリエンスを最適化するために、主流のビデオプレーヤーの効果に基づいています。

##2. JS は純粋なネイティブ構文で記述されます。JQuery を使用すると、セレクターと CSS スタイルの取得が簡素化されます。

# #3. この記事では、clientX を使用してスクロールバーの外側のマウスの動きを計算します。

以上がJavaScript+CSSを使用してカスタムドラッグプログレスバーを実装する方法（コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：vue に vux コンポーネントをインストールする方法 (手順)次の記事：vue に vux コンポーネントをインストールする方法 (手順)

続きを見る