So implementieren Sie das Schieben im Vollbildmodus in JQuery-Front-End-Fragen und Antworten-php.cn

So implementieren Sie das Schieben im Vollbildmodus in JQuery

王林

Freigeben： 2023-05-18 13:52:38

Original

634 Leute haben es durchsucht

Im modernen Website-Design ist der Vollbild-Slide-Effekt zu einem immer beliebter werdenden Webdesign-Trend geworden. Als weit verbreitete JavaScript-Bibliothek bietet jQuery auch einige sehr praktische Methoden, um Vollbild-Gleiteffekte zu erzielen. In diesem Artikel besprechen wir, wie man mit jQuery einen Vollbild-Gleiteffekt erzielt.

Zuerst müssen wir den notwendigen HTML- und CSS-Code vorbereiten. Um den Vollbild-Gleiteffekt zu erzielen, müssen wir dem HTML-Dokument mehrere Seiten hinzufügen, wobei jede Seite der Höhe eines Bildschirms entspricht. Gleichzeitig müssen wir diesen Seiten eine gemeinsame CSS-Klasse hinzufügen, z. B. „Abschnitt“, um ihren gemeinsamen Stil festzulegen.

Das Folgende ist eine einfache HTML- und CSS-Vorlage, um einen Vollbild-Gleiteffekt zu erzielen:

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

Nach dem Login kopieren

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

.section {
  height: 100%;
}

Nach dem Login kopieren

Im obigen Code haben wir eine gemeinsame Höhe von 100 % für festgelegt Seitenstil, der angibt, dass die Höhe jeder Seite der Höhe des gesamten Ansichtsfensters entspricht. Wir haben der Seite außerdem drei div-Elemente hinzugefügt, jedes mit einem gemeinsamen Klassennamen „section“.

Als nächstes müssen wir jQuery verwenden, um den Vollbild-Gleiteffekt zu erzielen. Um diese Aufgabe zu erfüllen, können wir ein jQuery-Plugin namens fullpage.js verwenden. fullpage.js ist ein weit verbreitetes jQuery-Plug-in, das viele Funktionen bietet, die Vollbild-Gleiteffekte ermöglichen.

Zuerst müssen wir fullpage.js und die globale Stildatei fullpage.css in die HTML-Datei einführen:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Dann müssen wir in der JavaScript-Datei verwenden fullpage.js-Plugin zum Initialisieren der Vollbild-Diashow:

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

Nach dem Login kopieren

Der vollständige JavaScript-Code lautet wie folgt:

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

Nach dem Login kopieren

Wir müssen das fullpage.js-Plugin im Kontext verwenden jeder Seite. Daher müssen wir jeder Seite eine ID hinzufügen, damit jQuery sie leicht finden kann. Wir können dies erreichen, indem wir jedem „Abschnitt“-Klassen-Div eine ID hinzufügen:

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

Nach dem Login kopieren

Da wir nun den HTML-, CSS- und JavaScript-Code eingerichtet haben, kann unsere Webseite ein Vollbild-Sliding erreichen. Es hat funktioniert. Durch die oben genannten Schritte können Sie den Diashow-Effekt der Webseite erzielen und jeden Bildschirm als Unterseite der Webseite behandeln.

Zusammenfassung: Es ist nicht schwierig, in jQuery einen Vollbild-Gleiteffekt zu erzielen, aber Sie müssen einige Vorbereitungen treffen. Wir müssen den erforderlichen HTML- und CSS-Code vorbereiten und das Plugin fullpage.js verwenden, um die Vollbild-Diashow zu initialisieren. Sie müssen auch die ID jedes „Abschnitts“-Klassen-Div festlegen, damit jQuery sie finden kann. Auf diese Weise können wir eine Webseite mit einem Vollbild-Gleiteffekt implementieren.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Schieben im Vollbildmodus in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!