Use Jquery to achieve the effect of draggable progress bar

This article mainly introduces the jQuery implementation of the draggable progress bar example code. It is very good and has reference value. Friends in need can refer to it

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

Rendering

Implementation Principle

First, use the mousedown() mouse down event to save a state value, the mouseup() mouse up event to cancel the state, and then cooperate with mousemove() at the same time. Mouse move event to achieve the effect of pressing and dragging.

Change the length of the precision bar and the distance to the relative left of the button while moving the mouse.

Then there is the calculation of distance, which mainly uses the pageX() attribute. pageX is the position of the mouse pointer relative to the left edge of the document. When the mouse is pressed, the relative position is recorded, and after the mouse moves, the distance moved by the mouse can be calculated. Thereby changing the button position and progress bar length.

The above is the detailed content of Use Jquery to achieve the effect of draggable progress bar. For more information, please follow other related articles on the PHP Chinese website!