jquery realisiert eine unendliche Popup-Box
In der Webentwicklung sind Popup-Boxen eine sehr häufige Interaktionsmethode. Bei der Implementierung von Popup-Boxen ist jQuery als eine der beliebtesten JavaScript-Bibliotheken für Entwickler natürlich zur ersten Wahl geworden.
Heute besprechen wir einen besonderen Pop-up-Effekt: das unendliche Pop-up. Dieser Effekt kann Benutzern ein reichhaltigeres visuelles Erlebnis bieten und auch die Interaktivität der Website verbessern. Ich glaube, dass viele Benutzer beim Surfen auf der Website auf diese Situation gestoßen sind: Nachdem ein Popup-Fenster geschlossen wurde, erscheint sofort ein anderes Popup-Fenster. Der Schock und die unerwarteten Überraschungen, die diese Erfahrung mit sich bringt, erregen eher die Aufmerksamkeit der Benutzer und wecken ihr Interesse.
Tatsächlich ist es nicht schwierig, mit jQuery einen unendlichen Popup-Effekt zu erzielen. Schauen wir uns an, wie Sie mit jQuery diesen Effekt schnell erzielen können.
Zunächst benötigen wir ein grundlegendes Webseiten-Framework. Hier verwenden wir den einfachsten Weg, nämlich das Hinzufügen des folgenden Inhalts zum HTML-Dokument:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现无限弹框</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
.box {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 3px 3px 5px #ccc;
display: none;
text-align: center;
padding-top: 60px;
font-size: 24px;
}
</style>
</head>
<body>
<div class="box">弹框1</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>In diesem Code definieren wir eine .box-Klasse, um den Inhalt unserer Popup-Box anzuzeigen. Diese Klasse ist auf display: none eingestellt, was bedeutet, dass sie zunächst nicht sichtbar ist. .box类，用于显示我们的弹框内容。这个类被设定为display: none，即一开始不可见。
接下来，我们通过jQuery实现无限弹框。具体来说，我们需要做以下几个步骤：
- 当用户打开网页时，立即显示第一个弹框。
- 当用户关闭已显示的弹框时，立即显示第二个弹框。
- 以此类推，实现无限循环弹框。
下面是代码实现：
$(document).ready(function() {
$('.box:first').fadeIn(1000); // 显示第一个弹框
$('.box').click(function() { // 当每一个弹框被点击时
$(this).fadeOut(500, function() { // 隐藏当前弹框
if ($(this).next().length > 0) { // 如果当前弹框下一个元素存在
$(this).next().fadeIn(1000); // 显示下一个弹框
} else { // 否则
$('.box:first').fadeIn(1000); // 从头开始
}
});
});
});代码中，通过$(document).ready()方法来确保DOM完全加载完成后执行代码。其后，我们首先通过.box:first选中第一个弹框，并通过fadeIn()方法将其显示。接着，我们定义了一个.click()方法，用于当每一个弹框被点击时执行的操作。
具体来说，$(this).fadeOut(500, function() {})将当前弹框隐藏，同时使用回调函数。if ($(this).next().length > 0)用于判断当前弹框下一个元素是否存在。如果存在，则使用$(this).next().fadeIn(1000)将下一个弹框显示出来；否则，使用$('.box:first').fadeIn(1000)
- Wenn der Benutzer die Webseite öffnet, wird sofort das erste Popup-Fenster angezeigt.
- Wenn der Benutzer das angezeigte Popup-Feld schließt, wird sofort das zweite Popup-Feld angezeigt.
- Analog dazu kann eine Endlosschleifen-Popup-Box erstellt werden.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现无限弹框</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
.box {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 3px 3px 5px #ccc;
display: none;
text-align: center;
padding-top: 60px;
font-size: 24px;
}
</style>
</head>
<body>
<div class="box">弹框1</div>
<div class="box">弹框2</div>
<div class="box">弹框3</div>
<div class="box">弹框4</div>
<div class="box">弹框5</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.box:first').fadeIn(1000); // 显示第一个弹框
$('.box').click(function() { // 当每一个弹框被点击时
$(this).fadeOut(500, function() { // 隐藏当前弹框
if ($(this).next().length > 0) { // 如果当前弹框下一个元素存在
$(this).next().fadeIn(1000); // 显示下一个弹框
} else { // 否则
$('.box:first').fadeIn(1000); // 从头开始
}
});
});
});
</script>
</body>
</html>$(document).ready() verwendet, um sicherzustellen, dass der Code danach ausgeführt wird Das DOM ist vollständig geladen. Danach wählen wir zunächst die erste Popup-Box über .box:first aus und zeigen sie über die Methode fadeIn() an. Als Nächstes definieren wir eine .click()-Methode für den Vorgang, der ausgeführt wird, wenn auf jedes Popup-Feld geklickt wird. Konkret: $(this).fadeOut(500, function() {}) verbirgt das aktuelle Popup-Fenster und verwendet die Rückruffunktion. if ($(this).next().length > 0) wird verwendet, um zu bestimmen, ob das nächste Element der aktuellen Popup-Box existiert. Wenn es vorhanden ist, verwenden Sie $(this).next().fadeIn(1000), um das nächste Popup-Feld anzuzeigen; andernfalls verwenden Sie $('.box:first'). fadeIn (1000)Starten Sie das Popup-Fenster neu. 🎜🎜Abschließend fügen wir den obigen Code zum HTML-Dokument hinzu und verweisen auf die jQuery-Bibliothek. Der vollständige Code lautet wie folgt: 🎜rrreee🎜Öffnen Sie nun die Webseite und wir können den Endlosschleifen-Popup-Effekt sehen. 🎜🎜Durch die Implementierung dieses Artikels haben wir nicht nur den unendlichen Popup-Effekt erreicht, sondern auch unser Verständnis der jQuery-Bibliothek vertieft. Gleichzeitig können wir den obigen Code auch an bestimmte Situationen anpassen, um andere Popup-Effekte flexibler zu erzielen. 🎜Das obige ist der detaillierte Inhalt vonjquery realisiert eine unendliche Popup-Box. 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
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)
Heiße Themen
1393
52
1207
24
Reacts Rolle bei HTML: Verbesserung der Benutzererfahrung
Apr 09, 2025 am 12:11 AM
React kombiniert JSX und HTML, um die Benutzererfahrung zu verbessern. 1) JSX bettet HTML ein, um die Entwicklung intuitiver zu gestalten. 2) Der virtuelle DOM -Mechanismus optimiert die Leistung und reduziert den DOM -Betrieb. 3) Komponentenbasierte Verwaltungs-Benutzeroberfläche zur Verbesserung der Wartbarkeit. 4) Staatsmanagement und Ereignisverarbeitung verbessern die Interaktivität.
Reagieren Sie Komponenten: Erstellen wiederverwendbarer Elemente in HTML
Apr 08, 2025 pm 05:53 PM
React -Komponenten können durch Funktionen oder Klassen definiert werden, wobei die UI -Logik eingefasst und Eingabedaten durch Props akzeptiert werden. 1) Komponenten definieren: Verwenden Sie Funktionen oder Klassen, um Reaktierungselemente zurückzugeben. 2) Rendering -Komponente: React -Aufrufe rendern Methode oder führt die Funktionskomponente aus. 3) Multiplexing -Komponenten: Daten durch Requisiten übergeben, um eine komplexe Benutzeroberfläche zu erstellen. Mit dem Lebenszyklusansatz von Komponenten kann die Logik in verschiedenen Phasen ausgeführt werden, wodurch die Entwicklungseffizienz und die Wartbarkeit des Codes verbessert werden.
Was sind die Einschränkungen des Reaktivitätssystems von Vue 2 in Bezug auf Array- und Objektänderungen?
Mar 25, 2025 pm 02:07 PM
Das Reaktivitätssystem von VUE 2 kämpft mit der Einstellung der Direktarray -Index, der Längenänderung und der Addition/Löschung der Objekteigenschaften. Entwickler können die Mutationsmethoden von VUE und VUE.SET () verwenden, um die Reaktivität sicherzustellen.
Reagieren und das Frontend: Bauen Sie interaktive Erlebnisse auf
Apr 11, 2025 am 12:02 AM
React ist das bevorzugte Werkzeug zum Aufbau interaktiver Front-End-Erlebnisse. 1) React vereinfacht die UI -Entwicklung durch Komponentierungen und virtuelles DOM. 2) Komponenten werden in Funktionskomponenten und Klassenkomponenten unterteilt. Funktionskomponenten sind einfacher und Klassenkomponenten bieten mehr Lebenszyklusmethoden. 3) Das Arbeitsprinzip von React beruht auf virtuellen DOM- und Versöhnungsalgorithmus, um die Leistung zu verbessern. 4) State Management verwendet Usestate oder diese. 5) Die grundlegende Verwendung umfasst das Erstellen von Komponenten und das Verwalten von Status, und die erweiterte Verwendung umfasst benutzerdefinierte Haken und Leistungsoptimierung. 6) Zu den häufigen Fehlern gehören unsachgemäße Statusaktualisierungen und Leistungsprobleme, Debugging -Fähigkeiten umfassen die Verwendung von ReactDevtools und exzellent
Was sind die Vorteile der Verwendung von TypeScript mit React?
Mar 27, 2025 pm 05:43 PM
TypeScript verbessert die Reaktionsentwicklung, indem sie die Sicherheit Typ, Verbesserung der Codequalität und eine bessere Unterstützung für eine IDE bietet, wodurch Fehler verringert und die Wartbarkeit verbessert werden.
Wie können Sie den Usereducer für komplexes Staatsmanagement verwenden?
Mar 26, 2025 pm 06:29 PM
In dem Artikel wird der Usereducer für komplexes Zustandsmanagement in React erläutert, wobei die Vorteile gegenüber Usestate detailliert beschrieben werden und wie sie in die Nutzung für Nebenwirkungen integriert werden können.
Was sind funktionale Komponenten in Vue.js? Wann sind sie nützlich?
Mar 25, 2025 pm 01:54 PM
Funktionelle Komponenten in vue.js sind zustandslos, leicht und fehlen Lebenszyklushaken, die ideal für die Rendern von reinen Daten und zur Optimierung der Leistung. Sie unterscheiden
Wie stellen Sie sicher, dass Ihre React -Komponenten zugänglich sind? Welche Tools können Sie verwenden?
Mar 27, 2025 pm 05:41 PM
In dem Artikel werden Strategien und Tools erörtert, um sicherzustellen, dass React -Komponenten zugänglich sind und sich auf semantische HTML, ARIA -Attribute, Tastaturnavigation und Farbkontrast konzentrieren. Es empfiehlt die Verwendung von Tools wie Eslint-Plugin-JSX-A11Y und AXE-CORE für Testi
