Ich habe gerade die Firmenwebsite erstellt und über den Vollbildmodus gescrollt, was die Browserfahrung der offiziellen Website erheblich verbesserte. Fassen wir also die Methode der Verwendung von FullPage.js zusammen. Willkommen bei Correat Me
1. Einführung in Fullpage.js
fullpage.js ist ein Satz von JS-Plug-Ins, die Vollbild-Scrollen des Browsers implementieren. Viele Websites nutzen es jetzt, um ein besseres Browsing -Erlebnis zu erzielen.
Funktionen, die erreicht werden können:
• Stützen Sie die Vorwärts- und Rückwärts- und Tastatursteuerung
• Mehrere Rückruffunktionen
• Unterstützen Sie Mobiltelefon- und Tablet -Touch -Events
• Unterstützen Sie CSS3 -Animationen
• Unterstützen Sie das Fensterzoom
• Automatische Einstellung beim Zoom der Fenster
• Kann die Bildlaufbreite, Hintergrundfarbe, Bildlaufgeschwindigkeit, Schleifenoptionen, Rückrufe, Textausrichtung usw. festlegen.
2. Plugin -Download
npm | npm install fullpage.js
Bower | Bower Install fullpage.js
github | https: //github.com/alvarotrigo/fullpage.js/
CDN | https: //cdnjs.com/libraries/fullpage.js
1. Methode zur Dateieinführung
<link rel = "stylesheet" href = "css/jquery.fullpage.css"> <script src = "js/jquery.min.js"> </script> <script src = "js/jquery.fullpage.js"> </script>
Hinweis: Sie müssen zuerst JQuery vorstellen und dann FullPage einführen. Als ich anfing, Demo zu schreiben, wurde der Effekt aufgrund der falschen Reihenfolge und des Browserfehlers in FullPage.js nicht erreicht. JQuery ist undefiniert.
4. Schreiben Sie den HTML -Code
<div id = "fullpage"> <div> § 1 </div> <div> § 2 </div> <div> § 3 </div> <div> § 4 </div> </div>
Alle Inhalte sind im DIV mit dem ID -Namen FullPage enthalten, und Sie können dies nicht zum Körper hinzufügen.
Das DIV -Element mit dem Klassennamen. Abschnitt ist eine einzelne Seite. Der Austausch zwischen verschiedenen Seiten kann über das Mausrad und die Tastatur gesteuert werden, und die Listennavigation kann ebenfalls festgelegt werden.
Wenn Sie gleichzeitig einen horizontalen Bildschirm-Cut-Effekt auf einer Seite erzielen möchten, können Sie Div.slide in der Div.-Abschnitt hinzufügen. Der Code ist wie folgt:
<div> <div> Folie 1 </div> <div> Folie 2 </div> <div> Folie 3 </div> <div> Folie 4 </div> </div>
5. Fullpage initialisieren
$ (Dokument) .Ready (function () {$ ('#fullpage'). fullpage ({..... // Optionen für Details finden Sie unter https://github.com/alvarotrigo/fullpage.js/});});Einrichten der Seitenleistennavigation
Diese Navigation ist im Allgemeinen auf dem Website -Design verfügbar. Der Standardnavigationsstil von Fullpage besteht aus kleinen schwarzen Punkten und unterstützt auch die Einstellung anderer Stile.
<ul id="myMenu"> <li data-menuanchor="firstPage"><a href="#firstPage">First section</a></li> <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li> <li data-menuanchor="thirdPage"><a href="#secondPage">Second Abschnitt </a> </li> <li data-menuanchor = "viertes Page"> <a href = "#viertel"> Vierter Abschnitt </a> </li>
#mymenu {Position: fix; ...} $ ('#fullpage'). fullPage ({Anchors: ['FirstPage', 'SecondPage', 'ThirdPage', 'FourthPage', 'LastPage'], Menü: '#Mymenu'});6. aufgetretene Probleme und Lösungen
Nachdem die Website abgeschlossen war, stellte ich fest, dass ich gerade die Seite eingegeben habe und bevor die Datei fullpage.js initialisiert wurde, das DOM -CSS geladen wurde und alle angezeigten Stilinhalte zusammen gepresst und nach dem Laden wiederhergestellt werden würden. Wenn die Website optimiert ist und die Internetgeschwindigkeit sehr leistungsfähig ist, ist diese Zeit kurz, aber sie wird immer noch eine schlechte Benutzererfahrung mit sich bringen.
Probieren Sie also verschiedene Lösungen aus:
1.Div.Sektion
Abschnitt {Überlauf: versteckt}
Nach dem Testen hat diese Methode keine Verwendung.
2. Setzen Sie eine leere Maske, nur die Maske wird angezeigt, bevor alle Seiten abgeschlossen sind. Der Themeninhalt ist versteckt und nach dem Laden wird die Inhaltsanzeigemaske entfernt. Natürlich können Sie auch Inhalte im Zusammenhang mit Website in der Maskenebene einrichten.
Spezifische Implementierungsmethode Demo:
<html> <head> <meta http-äquiv = "content-type" content = "text/html; charSet = gb2312"> <tites> bis betitelte Dokument </title> <script Sprache = "javascript" type = "text/javaScript"> Funktion showAllcontent (Status 2) {{{{{{{{{{{{{{{{{{{{{{{{{{{{{text document.getElementByIdX ("showContent"). style.display = status1; document.getElementByIdX ("showload"). style.display = status2; } </script> </head> <body onload = 'showAllContent ("", "keine")'> <div id = "showload" style = "z-Index: 2; Anzeige: Block; Breite: auto; Höhe: auto;"> Die Seite laden ... </div>
<Script> showAllContent ("keine", "") </script>
</body>
</html>
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.