Maison > Article > interface Web > js pour implémenter un effet de barre de progression de glissement personnalisé (exemple de code)

js pour implémenter un effet de barre de progression de glissement personnalisé (exemple de code)

青灯夜游original: 2018-09-20 16:02:555630parcourir

Comment créer une barre de progression déplaçable ? Ce chapitre vous amène à implémenter un effet de barre de progression de glisser personnalisé (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Regardez d'abord les rendus :

L'exemple de code est divisé en trois parties :

Partie HTML :

<body>
    <div id="demo">

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

    </div>
</body>

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

À ce stade, le style personnalisé a été essentiellement implémenté. Il vous suffit de modifier la largeur de la barre de progression pour afficher différentes progressions. ; barre de progression suivante et événement glisser

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

Instructions :

1. Liez l'événement mousedown au calque d'habillage de la barre de progression. . Il ne s'agit pas de la barre de progression elle-même. Il s'agit d'une conception basée sur les effets des lecteurs vidéo grand public afin d'optimiser l'expérience utilisateur

2. JS est écrit en syntaxe native pure. vous pouvez simplifier le sélecteur et les styles CSS. Get ;

3. Le mouvement de la souris en dehors de la barre de défilement est calculé à l'aide de clientX.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JS implémente l'effet de case à cocher déroulante (exemple de code)Article suivant：JS implémente l'effet de case à cocher déroulante (exemple de code)

Articles Liés

Voir plus