Une brève discussion sur la façon d'ajouter des en-têtes et des droits d'auteur au plug-in jquery fullpage

Je vais maintenant partager avec vous une brève discussion sur la façon d'ajouter des en-têtes et des droits d'auteur à l'aide du plug-in jquery fullpage. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Avant-propos

Une page est créée via le plug-in jquery-fullpage, et la page entière défile en plein écran. Cependant, nous souhaitons ajouter un copyright à la dernière page, qui ne fait qu'environ 100 px de haut, sans nécessiter un plein écran pour mettre le copyright. Comment faire ? J'ai cherché et trouvé différentes méthodes. Modifiez le code source, etc., ou écrivez votre propre code pour juger. Vertigineux. En fait, la solution officielle a été fournie.

Ci-dessous, parlons brièvement de la façon de l'implémenter

En fait, seule la partie html est nécessaire pour l'implémenter

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

Comme ci-dessus, je ne parlerai pas du code js. Tant que vous pourrez l'exécuter, il n'y aura aucun problème. Ici, il vous suffit d'ajouter une classe fp-auto-height à la tête et au bas.

C'est pas efficace ?

Hé, c'est parce que vous n'avez cité que js et non css. Citez simplement le css ci-dessous.

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

En fait, le code clé est simplement le suivant

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Schéma de boucle en Ajax

Une solution rapide pour qu'Ajax renvoie un objet Objet

Introduction aux 4 méthodes de requête courantes d'ajax dans jQuery

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!