ホームページ > 記事 > ウェブフロントエンド > JavaScript+CSSを使用してカスタムドラッグプログレスバーを実装する方法(コード)
この記事の内容は、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('.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. プログレス バー自体ではなく、マウスダウン イベントをプログレス バーのラッピング レイヤーにバインドします。これがデザインです。ユーザー エクスペリエンスを最適化するために、主流のビデオ プレーヤーの効果に基づいています。
##2. JS は純粋なネイティブ構文で記述されます。JQuery を使用すると、セレクターと CSS スタイルの取得が簡素化されます。# #3. この記事では、clientX を使用してスクロール バーの外側のマウスの動きを計算します。
以上がJavaScript+CSSを使用してカスタムドラッグプログレスバーを実装する方法(コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。