Jquery を使用してドラッグ可能なプログレス バーの効果を実現する

この記事では、ドラッグ可能なプログレスバーを実装するための jQuery のサンプルコードを主に紹介します。これは非常に優れており、必要な方は参考にしてください。

js

　<div class="progress">
 <div class="progress_bg">
  <div class="progress_bar"></div>
 </div>
 <div class="progress_btn"></div>
 <div class="text">0%</div>
</div>

Rendering

実装原理

まず、mousedown() マウスダウンイベントで状態値を保存し、mouseup() マウスアップイベントで状態をキャンセルし、mousemove() を調整します。同時にマウスを動かすと、押してドラッグする効果が得られます。

マウスを動かしながら、精度バーの長さとボタンの相対的な左までの距離を変更します。

次に距離の計算ですが、主にpageX()属性を使います。 pageX は、ドキュメントの左端を基準としたマウス ポインタの位置です。マウスが押されると相対位置が記録され、マウスが移動した後、マウスが移動した距離を計算できます。これにより、ボタンの位置とプログレスバーの長さが変更されます。

以上がJquery を使用してドラッグ可能なプログレス バーの効果を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。