suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie das Schieben im Vollbildmodus in JQuery

So implementieren Sie das Schieben im Vollbildmodus in JQuery

王林
王林Original
2023-05-18 13:52:38599Durchsuche

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>
html, body {
  height: 100%;
  margin: 0;
}

.section {
  height: 100%;
}

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>
...
<link rel="stylesheet" href="fullpage.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
...

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

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

Der vollständige JavaScript-Code lautet wie folgt: 

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

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>

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!

JavaScript jquery css html JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie NodeJS in cmdNächster Artikel：So verwenden Sie NodeJS in cmd

In Verbindung stehende Artikel

Mehr sehen