Home > Web Front-end > JS Tutorial > body text

Use Jquery to achieve the effect of draggable progress bar

PHP中文网
Release: 2017-06-22 15:03:26
Original
2930 people have browsed it

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>
Copy after login

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;}
Copy after login

js

   $(function(){
    var tag = false,ox = 0,left = 0,bgleft = 0;
    $(&#39;.progress_btn&#39;).mousedown(function(e) {
     ox = e.pageX - left;
     tag = true;
    });
    $(document).mouseup(function() {
     tag = false;
    });
    $(&#39;.progress&#39;).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;);
     }
    });
   });
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template