Comment implémenter le glissement plein écran dans jquery-Questions et réponses frontales-php.cn

Comment implémenter le glissement plein écran dans jquery

王林

Libérer： 2023-05-18 13:52:38

original

634 Les gens l'ont consulté

Dans la conception de sites Web modernes, l'effet coulissant plein écran est devenu une tendance de plus en plus populaire en matière de conception Web. En tant que bibliothèque JavaScript largement utilisée, jQuery fournit également des méthodes très pratiques pour obtenir des effets de glissement en plein écran. Dans cet article, nous verrons comment obtenir un effet de glissement plein écran à l'aide de jQuery.

Tout d’abord, nous devons préparer le code HTML et CSS nécessaire. Afin d'obtenir l'effet de glissement plein écran, nous devons ajouter plusieurs pages au document HTML, chaque page correspondant à la hauteur d'un écran. En même temps, nous devons ajouter une classe CSS commune à ces pages, telle que « section », pour définir leur style commun.

Ce qui suit est un simple modèle HTML et CSS pour obtenir un effet de glissement plein écran :

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fullpage Sliding with jQuery</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="section">
    <h1>Section 1</h1>
  </div>
  <div class="section">
    <h1>Section 2</h1>
  </div>
  <div class="section">
    <h1>Section 3</h1>
  </div>
  <script src="jquery.js"></script>
  <script src="script.js"></script>
</body>
</html>

Copier après la connexion

html, body {
  height: 100%;
  margin: 0;
}

.section {
  height: 100%;
}

Copier après la connexion

Dans le code ci-dessus, nous définissons un style commun avec une hauteur de 100% pour la page, en précisant que la hauteur de chaque page est-ce que toute la fenêtre est haute. Nous avons également ajouté trois éléments div à la page, chacun avec un nom de classe commun « section ».

Ensuite, nous devons utiliser jQuery pour obtenir l'effet de glissement plein écran. Nous pouvons utiliser un plugin jQuery appelé fullpage.js pour accomplir cette tâche. fullpage.js est un plug-in jQuery largement utilisé, qui fournit de nombreuses fonctionnalités facilitant les effets de glissement en plein écran.

Tout d'abord, nous devons introduire fullpage.js et le fichier de style global fullpage.css dans le fichier HTML :

...
<link rel="stylesheet" href="fullpage.css">
</head>
<body>
  <div class="section">
    <h1>Section 1</h1>
  </div>
  <div class="section">
    <h1>Section 2</h1>
  </div>
  <div class="section">
    <h1>Section 3</h1>
  </div>
  <script src="jquery.js"></script>
  <script src="fullpage.js"></script>
  <script src="script.js"></script>
</body>
</html>

Copier après la connexion

...
<link rel="stylesheet" href="fullpage.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
...

Copier après la connexion

Ensuite, dans le fichier JavaScript, nous devons utiliser le plug-in fullpage.js pour initialiser le full- diaporama d'écran :

$(document).ready(function() {
    $('#fullpage').fullpage();
});

Copier après la connexion

Complet Le code JavaScript est le suivant :

$(document).ready(function() {
  $('#fullpage').fullpage();
});

Copier après la connexion

Nous devons utiliser le plugin fullpage.js dans le contexte de chaque page. Par conséquent, nous devons ajouter un identifiant à chaque page afin que jQuery puisse les trouver facilement. Nous pouvons y parvenir en ajoutant un identifiant à chaque div de classe « section » :

...
<body>
  <div id="fullpage">
    <div class="section" id="section1">
      <h1>Section 1</h1>
    </div>
    <div class="section" id="section2">
      <h1>Section 2</h1>
    </div>
    <div class="section" id="section3">
      <h1>Section 3</h1>
    </div>
  </div>
  <script src="jquery.js"></script>
  <script src="fullpage.js"></script>
  <script src="script.js"></script>
</body>

Copier après la connexion

Maintenant que nous avons configuré le code HTML, CSS et JavaScript, notre page Web peut obtenir un effet de glissement en plein écran. Grâce aux étapes ci-dessus, vous pouvez obtenir l'effet diaporama de la page Web et traiter chaque écran comme une sous-page de la page Web.

Résumé : Il n'est pas difficile d'obtenir l'effet de glissement plein écran dans jQuery, mais vous devez faire quelques préparatifs. Nous devons préparer le code HTML et CSS nécessaire et utiliser le plugin fullpage.js pour initialiser le diaporama plein écran. Vous devez également définir l'ID de chaque div de classe "section" afin que jQuery puisse les trouver. De cette façon, nous pouvons implémenter une page Web avec un effet de glissement plein écran.

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!