js pour implémenter un effet de barre de progression de glissement personnalisé (exemple de code)-js tutoriel-php.cn

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

青灯夜游

Libérer： 2018-09-20 16:02:55

original

5971 Les gens l'ont consulté

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 :

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

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>

Copier après la connexion

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

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

Copier après la connexion

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!