Eine kurze Diskussion zum Hinzufügen von Headern und Urheberrechten zum JQuery-Ganzseiten-Plug-In

Jetzt werde ich Ihnen eine kurze Einführung in die Methode zum Hinzufügen von Headern und Urheberrechten mit dem JQuery-Ganzseiten-Plug-In geben. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Vorwort

Eine Seite wird über das jquery-fullpage-Plug-in erstellt und die gesamte Seite wird im Vollbildmodus gescrollt. Allerdings möchten wir der letzten Seite, die nur etwa 100 Pixel hoch ist, ein Urheberrecht hinzufügen, ohne dass ein Vollbild zum Setzen des Urheberrechts erforderlich ist. Wie geht das? Ich habe verschiedene Methoden gesucht und gefunden. Ändern Sie den Quellcode usw. oder schreiben Sie Ihren eigenen Code zur Beurteilung. Schwindlig. Tatsächlich wurde die offizielle Lösung bereitgestellt.

Lassen Sie uns im Folgenden kurz darüber sprechen, wie es implementiert wird

Tatsächlich ist nur der HTML-Teil erforderlich, um es zu implementieren

<p class="fullpage">
 <p class="section fp-auto-height">这里写头部</p>
 <p class="section">page1</p>
 <p class="section">page2</p>
 <p class="section">page3</p>
 <p class="section">page4</p>
 <p class="section fp-auto-height">这里写版权</p>
</p>

Wie oben werde ich nicht über den js-Code sprechen, solange Sie ihn ausführen können, wird es kein Problem geben. Hier müssen Sie nur oben und unten eine fp-auto-height-Klasse hinzufügen.

Ist es nicht effektiv?

Hey, das liegt daran, dass du nur js und nicht css zitiert hast. Zitiere einfach das css unten.

https://github.com/alvarotrigo/fullPage.js/blob/master/dist/jquery.fullpage.css

Tatsächlich ist der Schlüsselcode nur der Folgende

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
 height: auto !important;
}

.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
 height: auto !important;
}

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Schleifenschema in Ajax

Eine schnelle Lösung für die Ajax-Rückgabe des Objektobjekts

Einführung in die 4 gängigen Anforderungsmethoden von Ajax in jQuery

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion zum Hinzufügen von Headern und Urheberrechten zum JQuery-Ganzseiten-Plug-In. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!