Verwenden Sie JQuery, um den Effekt eines ziehbaren Fortschrittsbalkens zu erzielen

In diesem Artikel wird hauptsächlich der Beispielcode von jQuery zum Implementieren eines ziehbaren Fortschrittsbalkens vorgestellt. Er ist sehr gut und hat Referenzwert

css

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

js

.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;}

Wirkungsfigur

　　　$(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;
      }
      $(&#39;.progress_btn&#39;).css(&#39;left&#39;, left);
      $(&#39;.progress_bar&#39;).width(left);
      $(&#39;.text&#39;).html(parseInt((left/300)*100) + &#39;%&#39;);
     }
    });
    $(&#39;.progress_bg&#39;).click(function(e) {//鼠标点击
     if (!tag) {
      bgleft = $(&#39;.progress_bg&#39;).offset().left;
      left = e.pageX - bgleft;
      if (left <= 0) {
       left = 0;
      }else if (left > 300) {
       left = 300;
      }
      $(&#39;.progress_btn&#39;).css(&#39;left&#39;, left);
      $(&#39;.progress_bar&#39;).animate({width:left},300);
      $(&#39;.text&#39;).html(parseInt((left/300)*100) + &#39;%&#39;);
     }
    });
   });

Implementierungsprinzip

Verwenden Sie zunächst das Mousedown-Ereignis (mousedown()), um einen Zustandswert zu speichern, und das Mouseup-Ereignis (mouseup()) zum Speichern eines Statuswerts Brechen Sie den Status ab und arbeiten Sie dann gleichzeitig mit dem Mausbewegungsereignis mousemove () zusammen, um den Effekt des Drückens und Ziehens zu erzielen.

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

Dann gibt es noch die Distanzberechnung, 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 Position der Schaltfläche und die Länge des Fortschrittsbalkens.

Das obige ist der detaillierte Inhalt vonVerwenden Sie JQuery, um den Effekt eines ziehbaren Fortschrittsbalkens zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!