jquery realisiert eine unendliche Popup-Box-Front-End-Fragen und Antworten-php.cn

jquery realisiert eine unendliche Popup-Box

王林

Freigeben： 2023-05-24 22:28:38

Original

487 Leute haben es durchsucht

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>

Nach dem Login kopieren

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); // 从头开始
      }
    });
  });
});

Nach dem Login kopieren

代码中，通过$(document).ready()方法来确保DOM完全加载完成后执行代码。其后，我们首先通过.box:first选中第一个弹框，并通过fadeIn()方法将其显示。接着，我们定义了一个.click()方法，用于当每一个弹框被点击时执行的操作。

具体来说，$(this).fadeOut(500, function() {})将当前弹框隐藏，同时使用回调函数。if ($(this).next().length > 0)用于判断当前弹框下一个元素是否存在。如果存在，则使用$(this).next().fadeIn(1000)将下一个弹框显示出来；否则，使用$('.box:first').fadeIn(1000)

Als nächstes verwenden wir jQuery, um unendlich viele Popup-Boxen zu erstellen. Konkret müssen wir die folgenden Schritte ausführen:

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.

Das Folgende ist die Code-Implementierung:

<!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>

Nach dem Login kopieren

Im Code wird die Methode $(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!