jquery는 무한 팝업 상자를 실현합니다.-프런트엔드 Q&A-php.cn

jquery는 무한 팝업 상자를 실현합니다.

王林

풀어 주다： 2023-05-24 22:28:38

원래의

488명이 탐색했습니다.

웹 개발에서 팝업 상자는 매우 일반적인 상호 작용 방법입니다. 팝업 상자를 구현할 때 가장 인기 있는 JavaScript 라이브러리 중 하나인 jQuery는 자연스럽게 개발자의 첫 번째 선택이 되었습니다.

오늘은 특별한 팝업 효과인 무한 팝업에 대해 이야기해보겠습니다. 이 효과는 사용자에게 더욱 풍부한 시각적 경험을 제공하고 웹사이트의 상호작용성을 향상시킬 수 있습니다. 나는 많은 사용자들이 웹사이트를 탐색할 때 이런 상황을 경험했다고 생각합니다. 하나의 팝업 상자가 닫히면 즉시 다른 팝업 상자가 나타납니다. 이러한 경험이 가져다주는 충격과 예상치 못한 놀라움은 사용자의 관심을 끌고 흥미를 자극할 가능성이 더 높습니다.

사실 jQuery를 통해 무한 팝업 효과를 구현하는 것은 어렵지 않습니다. 이 효과를 빠르게 달성하기 위해 jQuery를 사용하는 방법을 살펴보겠습니다.

먼저 기본적인 웹페이지 프레임워크가 필요합니다. 여기서는 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으로 설정되어 있어 처음에는 표시되지 않습니다. .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)

다음으로 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>

로그인 후 복사

코드에서는 $(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 라이브러리를 참조합니다. 전체 코드는 다음과 같습니다. 🎜rrreee🎜이제 웹 페이지를 열면 무한 루프 팝업 효과를 볼 수 있습니다. 🎜🎜이 글의 구현을 통해 우리는 무한 팝업 효과를 얻었을 뿐만 아니라 jQuery 라이브러리에 대한 이해도 깊어졌습니다. 동시에 특정 상황에 따라 위 코드를 조정하여 다른 팝업 효과를 보다 유연하게 구현할 수도 있습니다. 🎜

위 내용은 jquery는 무한 팝업 상자를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!