Heim >Web-Frontend >js-Tutorial >js zum Implementieren des benutzerdefinierten Drag-Fortschrittsbalkeneffekts (Codebeispiel)

js zum Implementieren des benutzerdefinierten Drag-Fortschrittsbalkeneffekts (Codebeispiel)

青灯夜游Original: 2018-09-20 16:02:555681Durchsuche

Wie erstelle ich einen verschiebbaren Fortschrittsbalken? In diesem Kapitel erfahren Sie, wie Sie mit js einen benutzerdefinierten Drag-Fortschrittsbalkeneffekt implementieren (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Werfen wir zunächst einen Blick auf die Renderings:

Der Beispielcode ist in drei Teile unterteilt:

HTML-Teil :

<body>
    <div id="demo">

        <div class="progress">
            <div class="progress-bar">
                <div class="progress-thumb"></div>
            </div>
        </div>

    </div>
</body>

CSS-Teil:

#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; 
}

Zu diesem Zeitpunkt wurde der benutzerdefinierte Stil grundsätzlich implementiert. Sie müssen nur die Breite von .progress-bar ändern, um unterschiedliche Fortschritte anzuzeigen. Als nächstes fügen Sie das Drag-Ereignis hinzu

JavaScript-Teil:

<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>

Anweisungen:

1. Binden Sie das Mousedown-Ereignis an die umschließende Ebene des Fortschrittsbalkens statt an den Fortschritt Die Leiste selbst wurde in Anlehnung an die Effekte gängiger Videoplayer entwickelt.

2 Wenn Sie JQuery verwenden, kann dies vereinfacht werden Erfassung von Selektoren und CSS-Stilen;

3. Die Mausbewegung außerhalb der Bildlaufleiste wird mit clientX berechnet.

Das obige ist der detaillierte Inhalt vonjs zum Implementieren des benutzerdefinierten Drag-Fortschrittsbalkeneffekts (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JS implementiert den Dropdown-Kontrollkästchen-Effekt (Codebeispiel)Nächster Artikel：JS implementiert den Dropdown-Kontrollkästchen-Effekt (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen