jQuery-Plugin zum Implementieren eines schwebenden Menüs
|
Lernen Sie jeden Tag ein schwebendes jQuery-Plug-In kennen. Der spezifische Inhalt ist zu Ihrer Information wie folgt: Schwebendes MenüDies ist ein weiterer sehr häufiger Effekt, der ein gemeinsames Merkmal des A-Tags verwendet - Anker Die Wirkung ist wie folgt
Codeabschnitt
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Schwebendes Menü</title>
<script src="js/jquery-3.4.1.min.js"></script>
<Stil>
*{
Rand: 0px;
Polsterung: 0px;
Benutzerauswahl: keine;
}
.Artikel{
Rand: 1px durchgehend hellgrau;
Rand: 10px;
Höhe: 400px;
Rahmenradius: 5px;
Position: relativ;
}
.Kopf{
Hintergrundfarbe: hellgrau;
Höhe: 30px;
Anzeige: Flex;
Inhalt ausrichten: Flex-Start;
Elemente ausrichten: zentrieren;
Texteinzug: 10px;
Position: absolut;
oben: 0px;
Breite: 100 %;
}
.fbox{
Position: fest;
oben: 20 %;
unten: 20 %;
rechts: 20px;
Breite: 150px;
Rand: 1px durchgehend hellgrau;
Hintergrundfarbe: weiß;
Rahmenradius: 5px;
}
.hauptsächlich{
Position: absolut;
oben: 30px;
Breite: 100 %;
unten: 0px;
Überlauf: automatisch;
}
.main ul{
Rand links: 30px;
}
A{
Farbe: grau;
}
</Stil>
</Kopf>
<Text>
</body>
</html>
<Skript>
$(Dokument).bereit(Funktion(){
//Test-Dom hinzufügen und Testdaten generieren var arr = [];
für(var i = 0;i<50;i++){
var id = "id"+i;
var $dom = $("<div class='item' id='"+id+"'><div class='head'>"+id+"</div></div>");
$dom.appendTo($("body"));
arr.push(ich);
}
//Methode $.fmenu(arr) aufrufen;
})
$.extend({
fmenu:Funktion(arr){
$(".fbox").entfernen();
var $fbox = $("<div class='fbox'></div>");
var $head =$("<div class='head'>Schwebendes Menü</div>");
var $main = $("<div class='main'></div>");
var $ul = $("<ul Klasse='ul'></ul>")
$ul.appendTo($main);
$head.appendTo($fbox);
$main.appendTo($fbox);
$fbox.appendTo($("body"));
arr.fürJeden(item=>{
var $li = $("<li><a href='#"+item+"'>"+item+"</a></li>");
$li.appendTo($ul);
})
}
})
</Skript>Erklärung der Ideen
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
Artikel empfehlen
Detaillierte Erläuterung des MySQL-Ausführungsprinzips, der logischen Schichtung und der Änderung der Datenbankverarbeitungs-Engine
Da ich MySQL schon so lange verwende, glaube ich,...
Umfassende Analyse von optimistischer Sperre, pessimistischer Sperre und MVCC in MySQL
Vorwort Bei der tatsächlichen Verwendung der Date...
Verwenden der Docker+Jenkins+Python3-Umgebung zum Erstellen eines äußerst detaillierten Tutorials
Vorwort: Nachdem die Automatisierung geschrieben ...
Detaillierte Erläuterung des Installationsprozesses von Jenkins auf CentOS 7
Installieren Sie Jenkins über Yum 1. Installation...
Grundlegende Nutzungsdetails zur Vue-Komponentenbildung
Inhaltsverzeichnis 1. Was ist Komponentenbildung?...
Kalendereffekt basierend auf jQuery
In diesem Artikelbeispiel wird der spezifische Co...
Erste Schritte mit benutzerdefinierten Anweisungen in Vue 3.0
Inhaltsverzeichnis 1. Benutzerdefinierte Anweisun...
XHTML-Erste-Schritte-Tutorial: XHTML-Tags
Einführung in XHTML-Tags <br />Vielleicht is...
Detaillierte Erklärung zur Konfiguration des sekundären Domänennamens auf einem Apache-Server in einer Linux-Umgebung
Dieser Artikel beschreibt, wie Sie einen sekundär...
Was die Website am meisten braucht, ist eine Verbesserung der Erfahrung der Zielgruppe
„Der große Fluss fließt nach Osten, die Wellen sp...
jQuery erzielt den Effekt einer Werbung, die nach oben und unten gescrollt wird
In diesem Artikel wird der spezifische Code von j...
CSS realisiert die Layoutmethode „Fest links“ und „Adaptiv rechts“
1. Schwebendes Layout 1. Lassen Sie zuerst das Di...
Zwei Möglichkeiten zum Erstellen von Docker-Images
Inhaltsverzeichnis Aktualisieren Sie das Bild von...
vue-pdf realisiert Online-Dateivorschau
In diesem Artikelbeispiel wird der spezifische Co...
Das WeChat-Applet realisiert den Neun-Quadrat-Rastereffekt
In diesem Artikel wird der spezifische Code für d...