ホームページ > ウェブフロントエンド > jsチュートリアル > ドラッグ可能なプログレスバーのjQuery実装の詳細な説明

ドラッグ可能なプログレスバーのjQuery実装の詳細な説明

小云云
リリース: 2018-01-06 11:17:59
オリジナル
2278 人が閲覧しました

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

html

   <p class="progress">
   <p class="progress_bg">
    <p class="progress_bar"></p>
   </p>
   <p class="progress_btn"></p>
   <p class="text">0%</p>
  </p>
ログイン後にコピー

css

  .progress{position: relative; width:300px;margin:100px auto;}
  .progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}
  .progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;}
  .progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#fff; 
  left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;}
  .progress_btn:hover{border-color:#F7B824;}
ログイン後にコピー

js

$(function(){
    var tag = false,ox = 0,left = 0,bgleft = 0;
    $('.progress_btn').mousedown(function(e) {
     ox = e.pageX - left;
     tag = true;
    });
    $(document).mouseup(function() {
     tag = false;
    });
    $('.progress').mousemove(function(e) {//鼠标移动
     if (tag) {
      left = e.pageX - ox;
      if (left <= 0) {
       left = 0;
      }else if (left > 300) {
       left = 300;
      }
      $('.progress_btn').css('left', left);
      $('.progress_bar').width(left);
      $('.text').html(parseInt((left/300)*100) + '%');
     }
    });
    $('.progress_bg').click(function(e) {//鼠标点击
     if (!tag) {
      bgleft = $('.progress_bg').offset().left;
      left = e.pageX - bgleft;
      if (left <= 0) {
       left = 0;
      }else if (left > 300) {
       left = 300;
      }
      $('.progress_btn').css('left', left);
      $('.progress_bar').animate({width:left},300);
      $('.text').html(parseInt((left/300)*100) + '%');
     }
    });
   });
ログイン後にコピー

実装原理

まず、mousedown() マウスプレスイベントを使用して状態を保存しますこの値を指定すると、mouseup() マウス リフト イベントがこの状態をキャンセルし、mousemove() マウス移動イベントと連携して、押してドラッグする効果を実現します。

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

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

関連する推奨事項:

キャンバスに円形のプログレスバーアニメーションを実装する方法の例

プログレスバー効果を備えたjquery-file-uploadファイルアップロードを実装する方法

ダウンロードプログレスバーを実装する方法WeChat アプレット

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート