Detaillierte Erläuterung der jQuery-Implementierung des ziehbaren Fortschrittsbalkens

In diesem Artikel wird hauptsächlich der Beispielcode von jQuery zur Implementierung eines ziehbaren Fortschrittsbalkens vorgestellt. Er ist sehr gut und hat Referenzwert. Ich hoffe, er kann jedem helfen.

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) + '%');
     }
    });
   });

Rendering

Implementierungsprinzip

Verwenden Sie zunächst The Das Mousedown-Ereignis (mousedown()) speichert einen Statuswert, das Mouseup-Ereignis (mouseup()) bricht den Status ab und arbeitet dann mit dem Mousemove()-Mausbewegungsereignis zusammen, um den Effekt des Drückens und Ziehens zu erzielen.

Ändern Sie die Länge des Präzisionsbalkens und den Abstand relativ links von der Schaltfläche, während Sie die Maus bewegen.

Dann gibt es noch die Entfernungsberechnung, die hauptsächlich das pageX()-Attribut verwendet. pageX ist die Position des Mauszeigers relativ zum linken Rand des Dokuments. Wenn die Maus gedrückt wird, wird die relative Position aufgezeichnet und nach der Bewegung der Maus kann die von der Maus zurückgelegte Strecke berechnet werden. Dadurch ändern sich die Schaltflächenposition und die Länge des Fortschrittsbalkens.

Verwandte Empfehlungen:

Ein Beispiel für die Implementierung einer kreisförmigen Fortschrittsbalkenanimation auf der Leinwand

Implementierung des Hochladens von jquery-file-upload-Dateien mit Fortschrittsbalken Wirkungsweise

Methode des WeChat-Applets zur Implementierung des Download-Fortschrittsbalkens

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der jQuery-Implementierung des ziehbaren Fortschrittsbalkens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!