JavaScript imitiert den vollständigen Seitenimplementierungsprozess der offiziellen Website von Xiaomi Mall

Ich habe fast 4 Monate lang Front-End gelernt, ohne es zu merken. Bevor ich JavaScript lernte, konnte ich mir die Projekte, die ich erstellt hatte, nur ansehen, aber nicht mit ihnen spielen. Diese Seite auf der offiziellen Website von Xiaomi ist das erste relativ vollständige Projekt, das ich geschrieben habe. Obwohl es noch viel Raum für Verbesserungen gibt, gibt es Hoffnung für die Zukunft!

In diesem Blog geht es hauptsächlich um einige Probleme, die beim Schreiben dieses Projekts aufgetreten sind, um die Suche nach entsprechenden Methoden und um die Fallstricke, auf die ich beim Schreiben dieses Projekts gestoßen bin.

1. Homepage-Erstellung

Die wesentlichen Effekte der Homepage sind folgende:

APP herunterladen, Einkaufswagen erstellen, zwei Navigationsleisten erstellen, Karussellbilder erstellen

Sobald das allgemeine Layout fertig ist, müssen wir mit JavaScript beginnen, um die Details zu verarbeiten.

1. Produktion der Download-App

Welcher Effekt wird hier benötigt? Wenn die Maus zur Download-App bewegt wird, erscheint der Download-QR-Code und verschwindet, wenn sie wegbewegt wird. Das ist der gleiche Effekt wie bei vielen, die wir zuvor gemacht haben, aber ist er etwas Besonderes? Er ist etwas Besonderes. Das Besondere daran ist, dass beim Erscheinen und Verschwinden ein Animationseffekt entsteht. Warum ist das Xiaomi-Original so glatt? Als ich überlegte, ob ich das Anzeigeattribut oder die Animation verwenden sollte, fiel mir plötzlich ein sehr cleveres Attribut ein! Wir können die Höhe dieser Box ändern und Übergangseffekte und Overflow:Hidden-Attribute verwenden, um den Effekt vollständig zu machen.

Aber hier wird es eine Grube geben. Für das kleine Dreieck oben können wir einen Rahmen verwenden und es dann außerhalb der Box positionieren. Wenn wir dieses kleine Dreieck in das QR-Code-Feld (.download) setzen, ist der obere Wert, den wir positionieren, negativ, was bedeutet, dass es das Feld überschreitet. Sobald es das Feld überschreitet, wird es ausgeblendet. Daher können wir das kleine Dreieck nur außerhalb platzieren, es dann über dem Feld positionieren und dann das Anzeigeattribut verwenden, um den Effekt zu vervollständigen. Dies ist möglicherweise nicht sehr intuitiv zu beschreiben, also beginnen wir mit dem Code!

HTML Quelltext:

   <li id="herunterladen">
       <a href="#" rel="external nofollow" rel="external nofollow" >App herunterladen</a>
       <i></i>
       <div Klasse="Herunterladen">
             <a href="#" rel="externes Nofollow" rel="externes Nofollow" >
             <img src="./image/Homepage Picture/xiaomi-android.png" alt="">
                 Xiaomi Mall APP
             </a>
       </div>
  </li>

CSS-Code: (kleinere Version)

     li {
            schweben: links;
            Polsterung: 8px;
            Polsterung rechts: 0; 
                A {
                    Anzeige: Block;
                    Höhe: 15px;
                    Textausrichtung: zentriert;
                    Polsterung rechts: 8px;
                    Rahmen rechts: 1px durchgezogen #423c37;
                    Schriftgröße: 8px;
                    Farbe: #b0b0b0;
                    &:schweben {
                         Farbe: #fff;
                         }
                } 
            }
            #herunterladen {
                Position: relativ;
                Breite: 68px;
                ich {
                    Anzeige: keine;
                    Position: absolut;
                    oben: 20px;
                    links: 25px;
                    Breite: 0;
                    Höhe: 0;
                    Rahmenfarbe: transparent transparent weiß transparent;
                    // Rahmenfarbe: transparent #ccc transparent transparent;
                    Rahmenstil: durchgezogen;
                    Rahmenbreite: 8px;
                    Z-Index: 9;
                   
                }
           
            .herunterladen {
                Position: absolut;
                oben: 16px;
                links: -28px;
                Rand oben: 20px;
                Breite: 130px;
                Höhe: 0;
                Überlauf: versteckt;
                Kastenschatten: 0px 1px 5px #aaa;
                // Rahmen: 1px durchgezogen #ccc;
                Hintergrundfarbe: #fff;
                Übergang: Höhe .3s;
                Z-Index: 999; 
                A {
                    Schriftgröße: 14px;
                    Farbe: #000;
                    Rand: 0;
                    &:schweben {
                        Farbe: #000;
                    }
                    img{
                        Anzeige: Block;
                        Breite: 100px;
                        Höhe: 100px;
                        Rand: 15px;
                    } 
                }
            }
            }

js-Code:

  var APP = this.document.getElementById('herunterladen')
  var download = dieses.document.querySelector('.download');
 
 
  APP.addEventListener('mouseenter', function () {
    download.style.height = 160 + 'px';
    APP.children[1].style.display = "Block";
 
  });
  APP.addEventListener('mouseleave', Funktion () {
    download.style.height = 0;
    APP.children[1].style.display = "keine";
 
  });

Hinweis: Dieser Code ist nicht vollständig und wird möglicherweise nicht ausgeführt. Er dient nur als Referenz.

Der Einkaufswagen ist auf die gleiche Art und Weise aufgebaut.

2. Erstellung der Navigationsleiste

Wir können das Navigationsleistenfeld auch auf die gleiche Weise wie oben mit der Höhe vervollständigen. Der Hauptpunkt ist, dass, wenn wir oben eine Navigationsleiste berühren, die entsprechende Produktleiste unten angezeigt wird. Gleichzeitig können wir jedes Element in dieser Produktleiste berühren, und wenn die Maus außerhalb der Navigationsleiste bewegt wird, verschwindet die Produktleiste.

Als ich diesen Effekt sah, war mein erster Gedanke: Ist das nicht dasselbe wie das Wechseln der Tab-Leiste? Wäre es nicht ausreichend, das Mausklick-Ereignis einfach in das Hinein- und Herausbewegen der Maus zu ändern? Aber ich habe wirklich nicht richtig nachgedacht. Wenn ich die Maus aus der Navigationsleiste herausbewegte und zur Produktleiste wollte, verschwand die Produktleiste direkt und der Effekt war, dass ich sie nur sehen, aber nicht berühren konnte. Daher können wir die Produktspalte nur so in die entsprechende Navigationsleiste schreiben.

Die entsprechende Abbildung:

Das nächste wird einfach. Ändern Sie einfach den Stil, ändern Sie den Inhalt und fügen Sie den verbleibenden JS-Code hinzu.

3. Produktion von Karussellbildern

Für das Karusselldiagramm können wir das Swiper-Plug-In verwenden, um es direkt zu schreiben.

Website: Chinesische Swiper-Website – Diashow-JS-Plug-in, H5-Seiten-Frontend-Entwicklung

Wählen Sie aus der Effektdemonstration eine Vorlage aus, die Ihnen gefällt, und ändern Sie sie. Das ist viel einfacher, als den Code selbst zu schreiben! Da es ein solches Plug-In gibt, das entwickelt werden kann, sollten wir es natürlich verwenden!

2. Erstellung von Login- und Registrierungsseiten

Als ich diese Seite erstellte, habe ich die linke Seite korrigiert und den Randwert auf der rechten Seite verringert. Als ich sie jedoch später akzeptierte, stellte ich fest, dass das Layout nicht einfach genug war. Wir können das linke und rechte Layout direkt ändern und für das Bild auf der linken Seite ein prozentuales Layout verwenden.

1. Box-Layout

Der Kerninhalt dieser Seite ist das Feld in der Mitte. Da die Registrierungs- und Anmeldeseiten auf derselben Seite geschrieben sind, sollten ihre Teile wie folgt aussehen:

Platzieren Sie die beiden Felder nebeneinander. Wenn wir auf die Schaltfläche „Anmelden/Registrieren“ im oberen Feld klicken, führt das untere Feld einen animierten Umschalteffekt aus.

2. Änderungen im Kontrollkästchenstil

Unter den Methoden, die ich online zum Ändern des Stils eines Kontrollkästchens gefunden habe, gibt es eine, die mich wirklich schockiert hat! Das heißt, Sie schreiben ein weiteres Kästchen und decken damit das ursprüngliche Kontrollkästchen ab.

Als ich diese Methode sah, hatte ich viele Fragen, aber glauben Sie mir, sie funktioniert wirklich. Der Code lautet wie folgt:

 #Kontrollkästchen {
                    Breite: 20px;
                    Höhe: 20px;
                    Anzeige: Inline-Block;
                    Farbe: #ff6900;
                    Rand: 0;  
                    Schriftgröße: 14px;
                      
                   }
                Eingabe[Typ=Kontrollkästchen]{
                    Breite: 20px;
                    Höhe: 20px;
                    Rand oben: 2px;
                    Position: relativ;
                }
                Eingabe[Typ=Kontrollkästchen]::nach {
                    Position: absolut;
                    oben: 0;
                    Farbe: #000;
                    Breite: 20px;
                    Höhe: 20px;
                    Anzeige: Inline-Block;
                    Sichtbarkeit: sichtbar;
                    Polsterung links: 0px;
                    Textausrichtung: zentriert;
                    Inhalt: ' ';
                    // Rahmenradius: 3px;
                }
                Eingabe[Typ=Kontrollkästchen]:aktiviert::nach {
                    Inhalt: "✓";
                    Farbe: #fff;
                    Schriftgröße: 10px;
                    Zeilenhöhe: 20px;
                    Hintergrundfarbe: rgb(255, 105, 0);
                }

3. Seitensprung

An diesem Punkt sind die beiden Seiten fast fertig. Sie müssen nur noch miteinander verbunden werden. Dieses Mal verwenden wir das Standortattribut im BOM-Objekt. (Wenn Sie es vergessen, können Sie in den vorherigen Blogs die entsprechende Verwendung überprüfen~).

Wenn wir auf die Schaltfläche „Anmelden“ klicken, springen wir zum Anmeldebereich, und wenn wir auf die Schaltfläche „Registrieren“ klicken, springen wir zum Registrierungsbereich. Das Problem besteht jedoch darin, dass sich Anmeldung und Registrierung auf einer Seite befinden. Daher müssen wir zu diesem Zeitpunkt Parameter übergeben, um zu bestimmen, auf welche Schaltfläche wir geklickt haben.

Vor dem Klicken:

Nach dem Klicken:

Und

?login im obigen Code ist der Parameter, den wir übergeben haben. Wir ändern die Registrierungsanmeldung von einem Link in eine Senden-Schaltfläche (Formular). Wenn wir darauf klicken, erhalten wir den Wert der aktuellen Schaltfläche und speichern ihn in einer Variablen. Beim Springen übergeben wir die Sprungadresse und Parameter, erhalten den gerade auf der Registrierungsseite übergebenen Parameterwert und führen Operationen basierend auf den Parametern aus. Schauen Sie sich den Code an!

HTML Quelltext:

     <Formularaktion="">
           <input type="submit" value="Anmelden" name="login" id="indexDL">
           <input type="submit" value="Registrieren" name="register"id="indexZC">
     </form>

js der Indexseite:

 var indexDL = this.document.getElementById('indexDL');
  var indexZC = this.document.getElementById('indexZC');
  var temp1 = null;
  var temp2 = null;
  indexDL.addEventListener('klicken', Funktion () {
    temp1 = indexDL.name;
    var neue URL = "login.html";
    // window.location.href = neue URL;
    // Fenster.Standort.Zuweisen(neueURL);
    window.event.returnValue = falsch
    window.location.href = "login.html" + "?" + temp1;
    // konsole.log(temp1);
  });
  indexZC.addEventListener('klicken', Funktion () {
    temp2 = indexZC.name;
    Fenster.Ereignis.Rückgabewert = falsch;
    window.location.href = "login.html" + "?" + temp2;
  });

Die Funktion besteht darin, Parameter zu übergeben.

js der Login-Seite:

    var temp3 = window.location.search.substr(1);
    wenn(temp3 === 'registrieren'){
        ZC.klick();   
    }

Die Funktion besteht darin, die Zeichenfolge auszuschneiden und festzustellen, ob es sich um den gewünschten Parameter handelt.

Zusammenfassung: Dies ist der erste vollständige Fall von HTML+CSS+JavaScript. Das Schreiben war mühsam, aber ich habe durch diesen Fall trotzdem viel Neues gelernt. Der wichtigste Punkt ist, daran zu denken, dass Sie den Float nach der Verwendung löschen müssen!

Dies ist das Ende dieses Artikels über die JavaScript-Imitation des vollständigen Seitenimplementierungsprozesses der offiziellen Xiaomi-Website. Weitere relevante JavaScript-Inhalte der offiziellen Xiaomi-Website finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!