Utilisez Jquery pour obtenir l'effet d'une barre de progression déplaçable

Cet article présente principalement l'exemple de code de jQuery pour implémenter une barre de progression déplaçable. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent se référer à

html

.

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

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;
      }
      $(&#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;);
     }
    });
   });

effect Figure

Principe de mise en œuvre

Tout d'abord, utilisez l'événement mousedown() mouse down pour enregistrer une valeur d'état, et l'événement mouseup() mouse up pour annulez l'état. Ensuite, coopérez avec l'événement de mouvement de la souris mousemove() en même temps pour obtenir l'effet d'appuyer et de faire glisser.

Modifiez la longueur de la barre de précision et la distance relative gauche du bouton tout en déplaçant la souris.

Ensuite, il y a le calcul de distance, qui utilise principalement l'attribut pageX(). pageX est la position du pointeur de la souris par rapport au bord gauche du document. Lorsque vous appuyez sur la souris, la position relative est enregistrée et après le déplacement de la souris, la distance parcourue par la souris peut être calculée. Changeant ainsi la position du bouton et la longueur de la barre de progression.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!