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)
<!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!
So fahren Sie Ihren Computer schnell herunter
So verwenden Sie den Rahmenrahmen
ETH-Marktanalyse heute
So handeln Sie auf Binance
Einführung in die Bedeutung von Cloud-Download-Fenstern
WLAN ist verbunden, aber es gibt ein Ausrufezeichen
Socketpair-Nutzung
So importieren Sie MDF-Dateien in die Datenbank
