Comment utiliser javascript+css pour implémenter une barre de progression de glisser personnalisée (code)-js tutoriel-php.cn

Comment utiliser javascript+css pour implémenter une barre de progression de glisser personnalisée (code)

不言

Libérer： 2018-09-15 15:20:16

original

2450 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser javascript+css pour implémenter une barre de progression de déplacement personnalisée (code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Personnalisez la barre de progression déplaçable, comme indiqué ci-dessous :

Le code est divisé en trois parties

HTML

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

Copier après la connexion

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

Copier après la connexion

À ce stade, le style personnalisé a été essentiellement implémenté. Il vous suffit de modifier la largeur de la barre de progression pour afficher une progression différente ; Ajoutez un événement glisser à la barre de progression

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>

Copier après la connexion

Instructions :

1 Liez plutôt l'événement mousedown au calque d'habillage de la barre de progression. de La barre de progression elle-même est conçue en référence aux effets des lecteurs vidéo grand public afin d'optimiser l'expérience utilisateur

2 JS est écrit en syntaxe native pure. Si vous utilisez JQuery, cela peut simplifier l'acquisition. de sélecteurs et de styles CSS ;

3. Cet article utilise clientX pour calculer le mouvement de la souris en dehors de la barre de défilement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!