Web-Frontend
Front-End-Fragen und Antworten
So implementieren Sie das Schieben im Vollbildmodus in JQuery
So implementieren Sie das Schieben im Vollbildmodus in JQuery
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!
Heiße KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Ein tiefes Eintauchen in die WebAssembly (WASM) für Front-End-Entwickler
Jul 27, 2025 am 12:32 AM
WebAssembly (WASM) Isagame-ChangerForFront-EnddeveloperSeekinghigh-Performancewebapplications.1. GWASMISABINYINTRUCTUCTIONFORMATTHATRUNSATNEAR-NATIVESPEED, EnablingLuageslikerust, C und GotoexecuteintheBrowser.2.
Performance-First State Management mit Zustand
Jul 25, 2025 am 04:32 AM
Zustandisalightgewicht, PerformantantantemanagementsLolutionForreActAppSthatavoidsRedux-SBOilerplate; 1.USSELECTIVETRECTELTOPTOPREVENTURNEYREYREYRE-REENDERSBYSELECTINGINYTENEEDEEDEDEDEDEDEDEDSPROPERTY;
Was ist der Zweck des REL -Attributs in einem Link -Tag in HTML?
Aug 03, 2025 pm 04:50 PM
rel = "styleSheet" linkScssFilesforstylingThePage; 2.rel = "vorlad" HintStopreloadcriticalResourcesForperformance; 3.rel = "icon" setStheWebsit'sfavicon;
OAuth 2.0 im Front-End verstehen und implementieren
Jul 25, 2025 am 04:31 AM
Bei Verwendung von OAuth 2.0 sollte der PKCE-Autorisierungscode-Prozess anstelle eines impliziten Prozesses angenommen werden. Vermeiden Sie es, Token in LocalStorage im Frontend zu speichern
Was ist der Zweck des Zielattributs des Anker -Tags in HTML?
Aug 02, 2025 pm 02:23 PM
ThetargetAttributeinanHtmlanchortagSpecifieswheretoophelinkedDocument.1._SelfoPenTheLinkinTheSametab (Standard) .2._BlankopensTheLeNanewtaborWindow.3._ParentopenTheParentFrame
Bauen Sie benutzerdefinierte, wiederverwendbare Haken in React
Aug 03, 2025 pm 04:51 PM
AgoodcustomhookinreactisareusableFunctionStarting mit "thisencapsStulatesfullogicforSharingacrosscomponenten";
Die Leistung mit Next.js 14 und dem App -Router optimieren
Jul 26, 2025 am 07:54 AM
UseServercomponentsByDefaultToreduclientjavaScriptandImProveloadTime; 2.LeveragelayoutCachingforpersistentuiwitheUtre-RendersDuringNavigation;
Erstellen komplexer UI -Layouts mit CSS -Subgrid
Jul 26, 2025 am 06:19 AM
CSSSUBGRIDEMABLECHILDELEMENTSTOAGELACROSSROWSANDColumnSofaparentGrid, SolvalalignmentISSuesInNestedLayouts.1.itallowsArtemtemtoinherITTheParent'SgridStructureByUsingSubgridForgrid-Template-Rowsorgrid-Templat-Columns
