Web-Frontend
js-Tutorial
jQuery ermöglicht die Funktion zum Umschalten der Menürotation kreisförmiger Symbole
jQuery ermöglicht die Funktion zum Umschalten der Menürotation kreisförmiger Symbole
Dieses Mal stelle ich Ihnen die Funktion von jQuery zum Wechseln der kreisförmigen Symbolmenürotation vor . . feature.presenter.1.5.css
body {
margin: 0;
font-family: Tahoma;
}
.feature-presenter {
position: absolute;
}
.feature-presenter-icon {
background-color: white;
text-align: center;
transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
border-radius: 50%;
cursor: pointer;
}
.feature-presenter img {
max-width: 100%;
transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
filter: blur(0px);
-webkit-filter: blur(0px);
image-rendering: -webkit-optimize-contrast;
}
.feature-presenter i {
font-size: 85px;
/*filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');*/
}
.feature-presenter-circle-container {
border-radius: 50%;
display: inline-block;
border: 1px solid rgba(0,0,0,0.09);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.09);
transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
background-color: white;
}
.feature-presenter-text-container {
line-height: 1.3;
display: inline-block;
vertical-align: top;
z-index: 1001;
position: relative;
overflow: hidden;
}
.feature-presenter-text-heading {
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
margin-bottom: 10px;
color: rgba(0, 0, 0, 0.8);
}
.feature-presenter-text-description {
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
color: rgba(0, 0, 0, 0.5);
}
.feature-presenter-text-container-out {
-webkit-transform: translate(200%, 0);
transform: translate(200%, 0);
-webkit-transition: -webkit-transform 0.5s ease-in;
transition: transform 0.5s ease-in;
}html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于jQuery环形图标菜单旋转切换特效</title>
<link href='css/feature.presenter.1.5.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<p id="test-element"></p>
<script src="js/feature.presenter.1.5.min.js"></script>
<script>
/* 图片地址可以是相对路径或绝对路径；标题和描述可以包含HTML */
var settings = [ {image: 'images/zzsc1.png', heading: '脚本之家', description: 'www.jb51.net'},
{ image: 'images/zzsc2.png', heading: '脚本之家', description: 'www.jb51.net' },
{ image: 'images/zzsc3.png', heading: '脚本之家', description: 'www.jb51.net' },
{ image: 'images/zzsc4.png', heading: '脚本之家', description: 'www.jb51.net' },
{ image: 'images/zzsc5.png', heading: '脚本之家', description: 'www.jb51.net' },
{ image: 'images/zzsc6.png', heading: '脚本之家', description: 'www.jb51.net' }
];
var options = {
circle_radius: 220,
normal_feature_size: 100,
highlighted_feature_size: 150,
top_margin: 100,
bottom_margin: 50,
spacing: 40,
min_padding: 50,
heading_font_size: 30,
description_font_size: 20,
type: 'image'
};
var fp = new FeaturePresenter($("#test-element"), settings, options);
fp.createPresenter();
</script>
</body>
</html>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere verwandte Themen im chinesischen PHP-Website-Artikel!
Empfohlene Lektüre:
Detaillierte Erläuterung der Verwendung von JSON und XMLjsonp+json implementiert AJAX domänenübergreifend AnfragenDas obige ist der detaillierte Inhalt vonjQuery ermöglicht die Funktion zum Umschalten der Menürotation kreisförmiger Symbole. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
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)
Heiße Themen
1376
52
Wie deaktiviere ich die Vorschau der Taskleisten-Miniaturansichten in Win11? Deaktivieren Sie die Anzeige der Miniaturansichten der Taskleistensymbole durch Bewegen der Maus
Feb 29, 2024 pm 03:20 PM
In diesem Artikel erfahren Sie, wie Sie die Miniaturbildfunktion deaktivieren, die angezeigt wird, wenn die Maus das Taskleistensymbol im Win11-System bewegt. Diese Funktion ist standardmäßig aktiviert und zeigt eine Miniaturansicht des aktuellen Fensters der Anwendung an, wenn der Benutzer den Mauszeiger über ein Anwendungssymbol in der Taskleiste bewegt. Einige Benutzer empfinden diese Funktion jedoch möglicherweise als weniger nützlich oder störend für ihr Erlebnis und möchten sie deaktivieren. Miniaturansichten in der Taskleiste können Spaß machen, aber auch ablenken oder stören. Wenn man bedenkt, wie oft Sie mit der Maus über diesen Bereich fahren, haben Sie möglicherweise ein paar Mal versehentlich wichtige Fenster geschlossen. Ein weiterer Nachteil besteht darin, dass es mehr Systemressourcen verbraucht. Wenn Sie also nach einer Möglichkeit suchen, ressourceneffizienter zu arbeiten, zeigen wir Ihnen, wie Sie es deaktivieren können. Aber
So fügen Sie Excel-Symbole in PPT-Folien ein
Mar 26, 2024 pm 05:40 PM
1. Öffnen Sie die PPT und blättern Sie zu der Seite, auf der Sie das Excel-Symbol einfügen müssen. Klicken Sie auf die Registerkarte Einfügen. 2. Klicken Sie auf [Objekt]. 3. Das folgende Dialogfeld wird angezeigt. 4. Klicken Sie auf [Aus Datei erstellen] und dann auf [Durchsuchen]. 5. Wählen Sie die einzufügende Excel-Tabelle aus. 6. Klicken Sie auf OK und die folgende Seite wird angezeigt. 7. Aktivieren Sie [Als Symbol anzeigen]. 8. Klicken Sie auf OK.
So machen Sie das Löschen vom Startbildschirm im iPhone rückgängig
Apr 17, 2024 pm 07:37 PM
Sie haben etwas Wichtiges von Ihrem Startbildschirm gelöscht und versuchen, es wiederherzustellen? Es gibt verschiedene Möglichkeiten, App-Symbole wieder auf dem Bildschirm anzuzeigen. Wir haben alle Methoden besprochen, die Sie anwenden können, um das App-Symbol wieder auf dem Startbildschirm anzuzeigen. So machen Sie das Entfernen vom Startbildschirm auf dem iPhone rückgängig. Wie bereits erwähnt, gibt es mehrere Möglichkeiten, diese Änderung auf dem iPhone wiederherzustellen. Methode 1 – App-Symbol in der App-Bibliothek ersetzen Sie können ein App-Symbol direkt aus der App-Bibliothek auf Ihrem Startbildschirm platzieren. Schritt 1 – Wischen Sie seitwärts, um alle Apps in der App-Bibliothek zu finden. Schritt 2 – Suchen Sie das App-Symbol, das Sie zuvor gelöscht haben. Schritt 3 – Ziehen Sie einfach das App-Symbol aus der Hauptbibliothek an die richtige Stelle auf dem Startbildschirm. Dies ist das Anwendungsdiagramm
Wie verstecke ich den Pfeil des Verknüpfungssymbols in Win11? Versteckte Methodenfreigabe
May 09, 2024 pm 01:00 PM
Viele Benutzer sind es gewohnt, die kleinen Symbolpfeile auf dem Desktop auszublenden. Wie sollten sie das tun? Nehmen wir das Win11-System als Beispiel, um Ihnen eine detaillierte Demonstration zu geben: Win11-Symbolpfeilmethode 1. Drücken Sie die Tastenkombination win+r, geben Sie regedit ein und klicken Sie auf OK. 2. Rufen Sie den Registrierungseditor auf, öffnen Sie: HKEY_CLASSES_ROOTlnkfile und wählen Sie im rechten Fenster das Element lsShortcut aus. 3. Klicken Sie mit der rechten Maustaste auf das Element lsShortcut, klicken Sie auf die Option Löschen und löschen Sie lsShortcut. 4. Starten Sie abschließend den Computer neu und Sie werden sehen, dass der kleine Pfeil der Desktop-Verknüpfung verschwindet. Tools von Drittanbietern: Xiaozhi Launcher Xiaozhi Launcher ist ein sehr benutzerfreundlicher und praktischer Desktop-Organizer.
Was soll ich tun, wenn das Symbol für die Win10-Eingabemethode fehlt? Wie kann ich das Symbol für die Win10-Eingabemethode abrufen, nachdem es verloren gegangen ist?
Feb 29, 2024 am 11:52 AM
Nachdem das Win10-Eingabemethodensymbol verloren gegangen ist, wissen viele Benutzer nicht, wie sie es abrufen können. In diesem Artikel werden einfache Methoden vorgestellt, mit denen Benutzer das Win10-Eingabemethodensymbol abrufen können, sodass sie die Eingabemethoden einfach wechseln und die Arbeitseffizienz verbessern können. 1. Gründe für fehlende Eingabemethode 1. Problem mit dem Tastaturlayout: Wenn Sie versehentlich das Tastaturlayout ändern, z. B. von Chinesisch auf Englisch oder eine andere Sprache, verschwindet die Eingabemethode möglicherweise vorübergehend. 2. Problem mit der Einstellung der Eingabemethode: In den Systemeinstellungen können wir den Anzeigemodus der Eingabemethode anpassen. Falsche Einstellungen können dazu führen, dass die Eingabemethode nicht angezeigt oder ausgeblendet werden kann. 3. Fehler oder Abstürze der Eingabemethode: Die Eingabemethoden-Software selbst kann Fehler oder Abstürze aufweisen, was dazu führen kann, dass die Eingabemethode nicht richtig angezeigt wird. 2. So rufen Sie die Eingabemethode auf Methode 1: 1. Drücken Sie [Win+
Wie ändere ich das Google Chrome-Symbol? So ändern Sie das Google Chrome-Symbol
Mar 13, 2024 pm 08:50 PM
Wie ändere ich das Google Chrome-Symbol? Einige Benutzer haben das Standardsymbol von Google Chrome satt und möchten es durch ein anderes ersetzen. Google Chrome bietet Benutzern jedoch eine kostenlose Symboländerungsfunktion, die nur eingestellt werden muss. Als Nächstes teilt der Redakteur die Methode zum Ändern des Google Chrome-Symbols mit. Wenn Sie interessiert sind, kommen Sie vorbei und probieren Sie es aus. So ändern Sie: 1. Suchen Sie die Desktop-Google Chrome-Verknüpfung und klicken Sie auf [Rechtsklick] – [Eigenschaften]. 2. Klicken Sie auf [Symbol ändern], wie in der Abbildung gezeigt. 3. Wählen Sie das gewünschte Symbol aus und klicken Sie auf [OK], wie im Bild gezeigt.
Wie kann das Problem gelöst werden, dass der Abstand zwischen den Symbolen in der unteren rechten Ecke von Win11 größer wird? Liste der Lösungen
Jun 10, 2024 pm 03:47 PM
Unter dem Win11-System sind einige Benutzer auf das Problem gestoßen, dass der Symbolabstand in der unteren rechten Ecke von Win11 größer wird. Wie kann dieses Problem gelöst werden? Werfen wir einen Blick nach unten! Zuerst müssen wir die Einstellungsoberfläche von Win11 öffnen. Klicken Sie in der Taskleiste auf die Schaltfläche „Start“ und wählen Sie „Einstellungen“. Suchen Sie in der Einstellungsoberfläche die Option „Personalisierung“ und klicken Sie auf „Taskleiste“. In den Taskleisteneinstellungen sehen wir die Option „Symbolabstand“. Passen Sie die Größe an Ihre Bedürfnisse an und klicken Sie auf die Schaltfläche „Übernehmen“, um die Einstellungen zu speichern. Die Lösung ist einfach, aber es gibt einige Dinge, auf die wir achten müssen. Achten Sie beim Anpassen des Symbolabstands zunächst darauf, ihn nicht zu klein einzustellen, da sich die Symbole sonst möglicherweise überlappen und die Verwendung beeinträchtigen. Zweitens, wenn Sie
Wie entferne ich das Höhenattribut eines Elements mit jQuery?
Feb 28, 2024 am 08:39 AM
Wie entferne ich das Höhenattribut eines Elements mit jQuery? Bei der Front-End-Entwicklung müssen wir häufig die Höhenattribute von Elementen manipulieren. Manchmal müssen wir möglicherweise die Höhe eines Elements dynamisch ändern, und manchmal müssen wir das Höhenattribut eines Elements entfernen. In diesem Artikel wird erläutert, wie Sie mit jQuery das Höhenattribut eines Elements entfernen, und es werden spezifische Codebeispiele bereitgestellt. Bevor wir jQuery zum Betreiben des Höhenattributs verwenden, müssen wir zunächst das Höhenattribut in CSS verstehen. Das Höhenattribut wird verwendet, um die Höhe eines Elements festzulegen
