집 > 기사 > 웹 프론트엔드 > 사용자 정의 드래그 진행률 표시줄 효과를 구현하는 Node.js(코드 예)

사용자 정의 드래그 진행률 표시줄 효과를 구현하는 Node.js(코드 예)

青灯夜游원래의: 2018-09-20 16:02:555585검색

드래그 가능한 진행률 표시줄을 만드는 방법은 무엇입니까? 이 장에서는 사용자 정의된 드래그 진행률 표시줄 효과를 구현하는 js를 제공합니다(코드 예제). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 렌더링을 살펴보겠습니다.

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

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. 진행률 표시줄 자체는 아닙니다. 이는 사용자 경험을 최적화하기 위해 주류 비디오 플레이어의 효과를 기반으로 한 디자인입니다.

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

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

위 내용은 사용자 정의 드래그 진행률 표시줄 효과를 구현하는 Node.js(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JS는 드롭다운 체크박스 효과를 구현합니다(코드 예)다음 기사：JS는 드롭다운 체크박스 효과를 구현합니다(코드 예)