집 >웹 프론트엔드 >JS 튜토리얼 >javascript+css를 사용하여 사용자 정의 드래그 진행률 표시줄을 구현하는 방법(코드)

javascript+css를 사용하여 사용자 정의 드래그 진행률 표시줄을 구현하는 방법(코드)

不言원래의: 2018-09-15 15:20:162433검색

이 글의 내용은 javascript+css를 사용하여 맞춤형 드래그 진행률 표시줄(코드)을 구현하는 방법에 대한 내용입니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

드래그 가능한 진행률 표시줄을 아래와 같이 사용자 정의합니다.

코드는 세 부분으로 나뉩니다.

HTML

<body>
<div id="demo">
<div class="progress">
<div class="progress-bar">
<div class="progress-thumb"></div>
</div>
</div>
</div>
</body>

CSS

#demo { 
    width: 600px; height: 100px; margin: 100px auto; 
    display: flex; align-items: center; 
}
#demo .progress { 
    width: 100%; height: 6px; border-radius: 3px; 
    background: #F1F5FD; 
}

#demo .progress .progress-bar { 
    width: 40%; height: 100%; border-radius: 3px; 
    background: #0072FF; 
}

#demo .progress .progress-bar .progress-thumb { 
    width: 14px; height: 14px; border-radius: 50%; 
    background: #FFFFFF; box-shadow: 0 0 15px 5px #0072FF; 
    float: right; 
    position: relative; left: 7px; top: -5px; 
}

이 시점에서 사용자 정의 스타일은 기본적으로 구현되었습니다. .progress-bar의 너비는 다른 진행 상황을 표시할 수 있습니다. 그런 다음 진행률 표시줄에 드래그 이벤트를 추가하세요.

JavaScript

<script>
        var slider = {
            use: function(id) {
                var self = this;
                self.slider = document.getElementById(id);
                self.bar = self.slider.querySelector(&#39;.progress-bar&#39;);
                self.thumb = self.slider.querySelector(&#39;.progress-thumb&#39;);
                self.slider.addEventListener(&#39;mousedown&#39;, function(e) {
                    if (e.button == 0) { // 判断点击左键
                        self.mDown = true;
                        self.beginX = e.offsetX;
                        self.positionX = e.offsetX;
                        self.beginClientX = e.clientX;
                        self.sliderLong = parseInt(self.getStyle(self.slider, &#39;width&#39;));
                        var per = parseInt(self.positionX / self.sliderLong * 100);
                        self.bar.style.width = per + &#39;%&#39;;
                    }
                });
                document.addEventListener(&#39;mousemove&#39;, function(e) {
                    if (self.mDown) {
                        var moveX = e.clientX - self.beginClientX;
                        self.positionX = (self.beginX + moveX > self.sliderLong) ? self.sliderLong : (self.beginX + moveX < 0) ? 0 : self.beginX + moveX;
                        var per = parseInt(self.positionX / self.sliderLong * 100);
                        self.bar.style.width = per + &#39;%&#39;;
                    }
                });
                document.addEventListener(&#39;mouseup&#39;, function(e) {
                    if (e.button == 0) { 
                        self.mDown = false;
                    }
                });
            },
            getStyle: function(obj,styleName){ // 获取元素样式的方法
                if(obj.currentStyle){
                    return obj.currentStyle[styleName];
                }else{
                    return getComputedStyle(obj,null)[styleName];
                }
            }
        };
        slider.use(&#39;demo&#39;);
    </script>

지침:

1. 진행률 대신 진행률 표시줄의 래핑 레이어에 mousedown 이벤트를 바인딩하세요. bar 자체는 사용자 경험을 최적화하기 위해 주류 비디오 플레이어의 효과를 참고하여 설계되었습니다.

2. JS는 순수 기본 구문으로 작성되어 선택기와 CSS 스타일 획득을 단순화할 수 있습니다.

3 . 스크롤 막대 외부의 마우스 움직임은 이 문서에서 clientX를 사용하여 계산됩니다.

위 내용은 javascript+css를 사용하여 사용자 정의 드래그 진행률 표시줄을 구현하는 방법(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：vue에 vux 구성 요소를 설치하는 방법(단계)다음 기사：vue에 vux 구성 요소를 설치하는 방법(단계)