ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryで無限ポップアップボックスを実現

jqueryで無限ポップアップボックスを実現

王林オリジナル: 2023-05-24 22:28:38493ブラウズ

Web 開発では、ポップアップボックスは非常に一般的な対話方法です。ポップアップボックスを実装する場合、最も人気のある JavaScript ライブラリの 1 つである jQuery が、開発者にとって当然のことながら最初の選択肢になります。

今日は、特別なポップアップ効果である無限ポップアップについて説明します。この効果により、ユーザーにより豊かな視覚体験が提供され、Web サイトの対話性も向上します。多くのユーザーは、Web サイトを閲覧しているときに、1 つのポップアップボックスが閉じられた後、すぐに別のポップアップボックスが表示されるという状況に遭遇したことがあると思います。この体験によってもたらされる衝撃や予期せぬ驚きは、ユーザーの注目を集め、興味を刺激する可能性が高くなります。

実際、jQuery を使用して無限のポップアップ効果を実現するのは難しくありません。 jQuery を使用してこの効果をすばやく実現する方法を見てみましょう。

まず、基本的な Web ページのフレームワークが必要です。ここでは、最も簡単な方法を使用し、次のコンテンツを HTML ドキュメントに追加します。

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

このコードでは、.box クラスを定義して、コンテンツの内容を表示します。ポップアップボックス。このクラスは display: none に設定されており、最初は表示されないことを意味します。

次に、jQuery を使用して無限のポップアップボックスを実現します。具体的には、次の手順を実行する必要があります。

ユーザーが Web ページを開くと、最初のポップアップボックスがすぐに表示されます。
ユーザーが表示されたポップアップボックスを閉じると、すぐに 2 番目のポップアップボックスが表示されます。
などを実行して、無限ループのポップアップボックスを実現します。

コードの実装は次のとおりです:

$(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)ポップアップボックスを再開します。

最後に、上記のコードを HTML ドキュメントに追加し、jQuery ライブラリを参照します。完全なコードは次のとおりです。

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

次に、Web ページを開くと、無限ループのポップアップ効果が表示されます。

この記事の実装を通じて、無限ポップアップ効果を実現しただけでなく、jQuery ライブラリへの理解も深まりました。同時に、特定の状況に応じて上記のコードを調整して、他のポップアップ効果をより柔軟に実現することもできます。

以上がjqueryで無限ポップアップボックスを実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript jquery html if 回调函数循环 Length function dom this display

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jqueryは検索フォームを実装します次の記事：jqueryは検索フォームを実装します

続きを見る