드래그 가능한 진행률 표시줄의 jQuery 구현에 대한 자세한 설명

이 글은 드래그 가능한 진행률 표시줄을 구현하기 위한 jQuery의 예제 코드를 주로 소개합니다. 매우 훌륭하고 참조할 가치가 있습니다. 필요한 친구가 모두 참고할 수 있기를 바랍니다.

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

구현 원리

　 먼저 mousedown() 마우스 누르기 이벤트를 사용하여 상태를 저장합니다. 값이 지정되면 mouseup() 마우스 리프트 이벤트가 이 상태를 취소한 다음 mousemove() 마우스 이동 이벤트와 협력하여 누르고 드래그하는 효과를 얻습니다.

마우스를 움직이면서 정밀 바의 길이와 버튼의 상대적인 왼쪽 거리를 변경하세요.

　 그리고 주로 pageX() 속성을 사용하는 거리 계산이 있습니다. pageX는 문서의 왼쪽 가장자리를 기준으로 하는 마우스 포인터의 위치입니다. 마우스를 누르면 상대 위치가 기록되고, 마우스가 이동한 후 마우스가 이동한 거리를 계산할 수 있습니다. 따라서 버튼 위치와 진행률 표시줄 길이가 변경됩니다.

관련 권장 사항:

캔버스에 원형 진행률 표시줄 애니메이션을 구현하는 방법의 예

진행률 표시줄 효과를 사용하여 jquery-file-upload 파일 업로드를 구현하는 방법

의 다운로드 진행률 표시줄을 구현하는 방법 위챗 애플릿

위 내용은 드래그 가능한 진행률 표시줄의 jQuery 구현에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!