La disposition Flex implémente la disposition de l'interface du lecteur NetEase Cloud

Cet article vous présente la mise en page flexible pour réaliser la mise en page de l'interface du lecteur NetEase Cloud. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Aujourd'hui, nous allons approfondir les détails du projet et parler des obstacles que tout découpeur graphique ne peut pas contourner. C'est également une tâche régulière à laquelle jser doit faire face - "NetEase Cloud Music Highly Realistic Responsive Carousel Graphics" Réalisation de ".

Les photos du carrousel sont aussi importantes pour le travail de chacun que les préparatifs de votre premier voyage chez votre petite amie. Elles sont importantes et ne peuvent être ignorées. Malheureusement, la plupart des gens écrivent des images de carrousel comme s’ils rencontraient leurs parents pour la première fois et avaient peu d’expérience.

Beaucoup de gens veulent écrire eux-mêmes un ensemble de carrousels, puis continuer à les améliorer dans de futurs travaux, et enfin créer leur propre bibliothèque de plug-ins. Malheureusement, la plupart des gens qui ont cette idée ne le découvrent que quand. ils agissent. Réaliser cela est encore plus difficile que de tenir la promesse « d'acheter un appartement quand on se marie ». En fin de compte, je n'ai eu d'autre choix que de devenir porteur de plug-ins en raison de la pression du projet et de mon propre niveau de compétence.

Cependant, il y a trois problèmes avec le porteur du plug-in. Premièrement, cette chose n'est d'aucune utilité pour la croissance technique d'une personne. Deuxièmement, et c'est aussi le point clé, le plug-in ne fonctionne pas complètement. répondre aux exigences du projet, et je ne suis pas capable de faire du développement secondaire. Lorsque je rencontre des choses étranges, le bug ne peut que se résigner à son sort et continuer le lent voyage pour trouver un plug-in plus approprié. Enfin, certains plugins sont lourds et volumineux, mais tout ce dont vous avez besoin est la fonctionnalité de carrousel la plus basique. Feriez-vous des dumplings juste pour avoir une assiette de vinaigre ? Je ne pense pas. Alors pourquoi utilisez-vous des centaines de plug-ins K ou même M dans le projet juste pour utiliser un carrousel ?

Beaucoup de gens peuvent dire que c'est parce qu'ils ne savent pas écrire. Eh bien, aujourd'hui, nous allons en implémenter un. Vous constaterez que le monde de js est si simple et beau avec l'effort de trouver un plug. -ins, vous pouvez développer un plug-in 8 A.

Regardez, tout le monde sait ce qu'est une image de carrousel, regardez de plus près ce que vous devez faire dans la première étape, dites au moins Je le fais glisser. Quelque chose doit pouvoir bouger, même si c'est un carré rouge. Ici, nous devons parler de glisser. Le glisser ne change rien de plus que les valeurs de gauche et du haut (seuls les extraterrestres modifient les valeurs de droite et du bas. Nous, les Terriens, utilisons généralement la gauche et le haut. Ne me demandez pas pourquoi d'abord, laissez-le). bougez dans une direction.

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        #p1 {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50px;
            top: 50px;
            background: red;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var op = document.getElementById(&#39;p1&#39;);

            var disX = 0;
            op.addEventListener("touchstart", function (e) {
                var startPoint = e.changedTouches[0].pageX;
                var startLeft = op.offsetLeft;
                disX = startPoint - startLeft;
            });

            op.addEventListener("touchmove", doMove,false);
            function doMove(e) {
                var currPoint = e.changedTouches[0].pageX;
                var newLeft  = currPoint - disX;
                op.style.left = newLeft +&#39;px&#39;;
            }
            function doUp(e) {
                var currPoint = e.changedTouches[0].pageX;
                var newLeft  = currPoint - disX;
                op.style.left = newLeft +&#39;px&#39;;
                op.removeEventListener("touchmove", doUp,false);
                op.removeEventListener("touchend", doUp,false);
            }
            op.addEventListener("touchend", doUp,false);
        }, false);
    </script>


    <p></p>

Regardez bien, ce n'est rien de plus que d'utiliser des événements mobiles. Vous pouvez le comprendre en quelques minutes. Le problème est que beaucoup d'élèves diront, professeur, je ne comprends pas ici, qu'est-ce que c'est. 🎜>

 var currPoint = e.changedTouches[0].pageX;
 var newLeft  = currPoint - disX;
 op.style.left = newLeft +'px';

Qu'est-ce que c'est ?

var currPoint = e.changedTouches[0].pageX;
var newLeft  = currPoint - disX;
op.style.left = newLeft +'px';
op.addEventListener("touchmove", doUp,false);
op.addEventListener("touchend", doUp,false);

En fait, c'est le contenu principal. En termes simples, c'est une image, une image très simple

Vous pouvez la comprendre en un coup d'œil.

En fait, elle est calculée comme la distance de la ligne bleue. Tant que la ligne bleue est correcte, la position sera. ne vous trompez pas. Ce n'est pas grave si vous ne pouvez vraiment pas le comprendre. Il n'y a rien de mal à le mémoriser sous forme de formule. Avec ces connaissances de base, il sera facile de gérer une étagère

nbsp;html>



    <meta>
    <meta>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .swiper-container {
            width: 320px;
            height: 130px;
            position: relative;
            margin: 20px auto;
            overflow: hidden;
        }

        .swiper-container .swiper-wrapper {
            width: 2240px;
            height: 130px;
            position: absolute;
            left: 0px;
        }

        .swiper-container .swiper-wrapper img {
            width: 320px;
            height: 130px;
            float: left;
            display: block;
        }

        .swiper-container ul {
            width: 35px;
            height: 4px;
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -15px;
        }

        .swiper-container ul li {
            width: 4px;
            height: 4px;
            border-radius: 2px;
            border: 0.25px solid #fff;
            margin-left: 2.5px;
            background: #666;
            float: left;
            cursor: pointer;
        }

        .swiper-container ul .active {
            background: #fff;
        }

        .swiper-container ul li:hover {
            background: #fff;
        }
    </style>



    <p>
        </p><p>
            <img  alt="La disposition Flex implémente la disposition de l'interface du lecteur NetEase Cloud" >
            <img  alt="La disposition Flex implémente la disposition de l'interface du lecteur NetEase Cloud" >
            <img  alt="La disposition Flex implémente la disposition de l'interface du lecteur NetEase Cloud" >
            <img  alt="La disposition Flex implémente la disposition de l'interface du lecteur NetEase Cloud" >
            <img  alt="La disposition Flex implémente la disposition de l'interface du lecteur NetEase Cloud" >
            <img  alt="La disposition Flex implémente la disposition de l'interface du lecteur NetEase Cloud" >
            <img  alt="La disposition Flex implémente la disposition de l'interface du lecteur NetEase Cloud" >
        </p>
        

            
•             
•             
•             
•             
•         

         <script> document.addEventListener("DOMContentLoaded", function () { var oSWiperContainer = document.querySelector(".swiper-container"); var oSWiperWrapper = document.querySelector(".swiper-container .swiper-wrapper"); var aImg = document.querySelectorAll(".swiper-container .swiper-wrapper img") var aLi = document.querySelectorAll(".swiper-container ul li"); oSWiperContainer.addEventListener("touchstart", function (e) { var disX = 0; var startPoint = e.changedTouches[0].pageX; var startLeft = oSWiperWrapper.getBoundingClientRect().left; disX = startPoint - startLeft; oSWiperContainer.addEventListener("touchmove", doMove, false); oSWiperContainer.addEventListener("touchend", doUp, false); function doMove(e) { var currPoint = e.changedTouches[0].pageX; var newLeft = currPoint - disX; oSWiperWrapper.style.left = newLeft + &#39;px&#39;; } function doUp(e) { oSWiperContainer.removeEventListener("touchmove", doUp, false); oSWiperContainer.removeEventListener("touchend", doUp, false); } }, false); }, false); </script> Au moins maintenant, vous pouvez faire du glisser-déposer. Ici, vous n'avez même pas besoin de considérer la direction verticale. . Le carrousel est plus facile que le glisser. Seule la direction horizontale est prise en compte

Le problème est qu'après avoir relâché, chaque élément du graphique du carrousel ne va pas à la bonne position. , la valeur de gauche modifiée à chaque fois sera une roue La largeur de l'image diffusée, comme indiqué ci-dessus.

Ne vous inquiétez de rien d'autre. La case rouge correspond à la largeur de l'écran du téléphone portable. Elle se déplace en fait d'une grille à chaque fois. Ensuite, il me suffit de définir une valeur iNow et d'enregistrer le nombre de grilles à déplacer. Tant que iNow est correct, tout ira bien.

nbsp;html>



    <meta>
    <meta>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .swiper-container {
            width: 320px;
            height: 130px;
            position: relative;
            margin: 20px auto;
            overflow: hidden;
        }

        .swiper-container .swiper-wrapper {
            width: 2240px;
            height: 130px;
            position: absolute;
            left: 0px;
            transition: .3s all ease;

        }

        .swiper-container .swiper-wrapper img {
            width: 320px;
            height: 130px;
            float: left;
            display: block;
        }

        .swiper-container ul {
            width: 35px;
            height: 4px;
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -15px;
        }

        .swiper-container ul li {
            width: 4px;
            height: 4px;
            border-radius: 2px;
            border: 0.25px solid #fff;
            margin-left: 2.5px;
            background: #666;
            float: left;
            cursor: pointer;
        }

        .swiper-container ul .active {
            background: #fff;
        }

        .swiper-container ul li:hover {
            background: #fff;
        }
    </style>



    <p>
        </p><p>
            <img  alt="La disposition Flex implémente la disposition de l'interface du lecteur NetEase Cloud" >
            <img  alt="La disposition Flex implémente la disposition de l'interface du lecteur NetEase Cloud" >
            <img  alt="La disposition Flex implémente la disposition de l'interface du lecteur NetEase Cloud" >
            <img  alt="La disposition Flex implémente la disposition de l'interface du lecteur NetEase Cloud" >
        </p>
        

            
•             
•             
•             
•             
•         

         <script> document.addEventListener("DOMContentLoaded", function () { var oSWiperContainer = document.querySelector(".swiper-container"); var oSWiperWrapper = document.querySelector(".swiper-container .swiper-wrapper"); var aImg = document.querySelectorAll(".swiper-container .swiper-wrapper img") var aLi = document.querySelectorAll(".swiper-container ul li"); var iNow = 0; var oW = aImg[0].offsetWidth; oSWiperContainer.addEventListener("touchstart", function (e) { var disX = 0; var startPoint = e.changedTouches[0].pageX; var startLeft = oSWiperWrapper.getBoundingClientRect().left; disX = startPoint - startLeft; oSWiperContainer.addEventListener("touchmove", doMove, false); oSWiperContainer.addEventListener("touchend", doUp, false); function doMove(e) { var currPoint = e.changedTouches[0].pageX; var newLeft = currPoint - disX; oSWiperWrapper.style.left = newLeft+&#39;px&#39;; } function doUp(e) { var endPoint = e.changedTouches[0].pageX; if(endPoint-startPoint>50){ iNow--; if(iNow==-1){ iNow = 0; } oSWiperWrapper.style.left = -iNow*oW+&#39;px&#39;; } if(endPoint-startPoint<-50){ iNow++; if(iNow==aImg.length){ iNow = aImg.length -1; } oSWiperWrapper.style.left = -iNow*oW+&#39;px&#39;; } oSWiperContainer.removeEventListener("touchmove", doMove, false); oSWiperContainer.removeEventListener("touchend", doUp, false); } }, false); }, false); </script> Pour souligner, getBoundingClientRect(), pourquoi n'ai-je pas utilisé offsetLeft ici ? Parce que dans les projets réels, il est impossible que la couche externe du carrousel soit recouverte de rien, ou s'il y a une marge et un remplissage, la distance du carrousel sera erronée. L'utilisation de offsetLeft n'est pas pratique pour le projet, et c'est le cas. ok pour les démonstrations, le projet lui-même serait inutile s'il était écrit comme ça.

Enfin, je parlerai d'un carrousel infini, qui compte en fait des nombres !

) Le soi-disant carrousel infini Le principe de la diffusion est que lorsque iNow est égal au 0 à l'extrême droite, ramenez-le à la position de la case rouge à gauche, lorsque iNow est égal à 4 à l'extrême gauche, iNow est égal à 6.

Beaucoup de gens ont le code source qui ignore l'apprentissage de base et est utilisé directement. Ce n'est pas différent de la recherche directe du plug-in, alors considérez cela comme un petit exercice.

Quatre exercices :

1. Implémenter l'adaptation multi-écran

2. Implémenter le carrousel sans fil

3. Implémenter si la distance de glissement ne dépasse pas 50px. ne diffusera pas le prochain

4. Implémentez la rotation automatique de la minuterie !

Ici, j'ai mis le code sur le côté gauche des quatre solutions pratiques ci-dessus à titre de rappel, et tout le monde devrait essayer d'apprendre comment le mettre en œuvre.

Articles connexes recommandés :

Explication détaillée de la disposition flexible

Comment utiliser la disposition flexible pour distribuer des colonnes

Introduction à l'application de mise en page flexible CSS3_html/css_WEB-ITnose

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!