사용자 정의 드래그 진행률 표시줄 효과를 구현하는 Node.js(코드 예)-JS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2018-09-20 16:02:55

원래의

5687명이 탐색했습니다.

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

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

사용자 정의 드래그 진행률 표시줄 효과를 구현하는 Node.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!