>  기사  >  웹 프론트엔드  >  드래그 가능한 진행률 표시줄의 jQuery 구현에 대한 자세한 설명

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

小云云
小云云원래의
2018-01-06 11:17:592251검색

이 글은 드래그 가능한 진행률 표시줄을 구현하기 위한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.