jquery menyedari kotak pop timbul yang tidak terhingga-Soal Jawab bahagian hadapan-php.cn

jquery menyedari kotak pop timbul yang tidak terhingga

王林

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

asal

455 orang telah melayarinya

Dalam pembangunan web, kotak timbul ialah kaedah interaksi yang sangat biasa. Apabila melaksanakan kotak pop timbul, jQuery, sebagai salah satu perpustakaan JavaScript yang paling popular, secara semula jadi telah menjadi pilihan pertama untuk pembangun.

Hari ini, kita akan membincangkan kesan pop timbul istimewa: pop timbul tak terhingga. Kesan ini boleh memberikan pengguna pengalaman visual yang lebih kaya dan juga meningkatkan interaktiviti tapak web. Saya percaya bahawa ramai pengguna telah menghadapi situasi ini semasa menyemak imbas tapak web: selepas satu kotak pop timbul ditutup, satu lagi kotak pop timbul muncul serta-merta. Kejutan dan kejutan tidak dijangka yang dibawa oleh pengalaman ini lebih berkemungkinan menarik perhatian pengguna dan merangsang minat mereka.

Sebenarnya, tidak sukar untuk mencapai kesan pop timbul tanpa had melalui jQuery. Mari kita lihat cara menggunakan jQuery untuk mencapai kesan ini dengan cepat.

Pertama, kita memerlukan rangka kerja halaman web asas. Di sini, kami menggunakan cara paling mudah, iaitu menambah kandungan berikut pada dokumen 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>

Salin selepas log masuk

Dalam kod ini, kami mentakrifkan kelas .box untuk memaparkan kandungan kotak pop timbul kami. Kelas ini ditetapkan kepada display: none, yang bermaksud ia tidak kelihatan pada mulanya.

Seterusnya, kami menggunakan jQuery untuk mencapai kotak pop timbul yang tidak terhingga. Secara khusus, kita perlu melakukan langkah berikut:

Apabila pengguna membuka halaman web, segera paparkan kotak timbul pertama.
Apabila pengguna menutup kotak timbul yang dipaparkan, kotak timbul kedua akan dipaparkan serta-merta.
Dan seterusnya, untuk mencapai gelung tetingkap timbul yang tidak terhingga.

Berikut ialah pelaksanaan kod:

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

Salin selepas log masuk

Dalam kod, kaedah $(document).ready() digunakan untuk memastikan kod dilaksanakan selepas DOM dimuatkan sepenuhnya. Selepas itu, kami mula-mula memilih kotak pop timbul pertama melalui .box:first dan memaparkannya melalui kaedah fadeIn(). Seterusnya, kami mentakrifkan kaedah .click() untuk melaksanakan operasi apabila setiap kotak pop timbul diklik.

Khususnya, $(this).fadeOut(500, function() {}) menyembunyikan kotak pop timbul semasa dan menggunakan fungsi panggil balik. if ($(this).next().length > 0) digunakan untuk menentukan sama ada unsur seterusnya kotak timbul semasa wujud. Jika ia wujud, gunakan $(this).next().fadeIn(1000) untuk memaparkan kotak timbul seterusnya jika tidak, gunakan $('.box:first').fadeIn(1000) untuk memaparkan kotak timbul dari awal.

Akhir sekali, kami menambah kod di atas pada dokumen HTML dan merujuk pustaka jQuery. Kod lengkap adalah seperti berikut:

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

Salin selepas log masuk

Kini, apabila kita membuka halaman web, kita dapat melihat kesan timbul gelung tak terhingga.

Melalui pelaksanaan artikel ini, kami bukan sahaja mencapai kesan pop timbul yang tidak terhingga, tetapi juga memperdalam pemahaman kami tentang perpustakaan jQuery. Pada masa yang sama, kami juga boleh melaraskan kod di atas mengikut situasi tertentu untuk mencapai kesan pop timbul lain dengan lebih fleksibel.

Atas ialah kandungan terperinci jquery menyedari kotak pop timbul yang tidak terhingga. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!