Jquery를 사용하여 드래그 가능한 진행률 표시줄 효과 얻기

이 글은 드래그 가능한 진행률 표시줄을 구현하기 위한 jQuery의 예제 코드를 주로 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 필요하신 분들은 참고하시면 됩니다

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

구현 원리

먼저 상태 값을 저장하려면 mousedown() 마우스 다운 이벤트를 사용하고, 상태를 취소하려면 mouseup() 마우스 업 이벤트를 사용하고 이후 mousemove()를 조정합니다. 누르기와 끌기의 효과를 얻기 위해 동시에 마우스 움직임 이벤트를 수행합니다.

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

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

위 내용은 Jquery를 사용하여 드래그 가능한 진행률 표시줄 효과 얻기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!