jquery 마스크는 3초 후에 사라집니다.-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

jquery 마스크는 3초 후에 사라집니다.

王林

May 25, 2023 am 10:51 AM

웹사이트 개발에서는 다양한 대화형 효과를 얻기 위해 JavaScript 라이브러리인 jQuery를 사용하는 경우가 많습니다. 그중에서도 마스크 레이어의 인터랙티브 효과도 매우 일반적입니다. 마스크 레이어는 사용자가 페이지와 상호 작용하기 전에 현재 레이어의 상호 작용 작업을 처리하도록 페이지를 덮는 반투명 마스크 레이어입니다. 특정 구현 프로세스에서는 jQuery의 fadeOut() 메서드를 사용하여 마스크 레이어가 3초 후에 자동으로 사라지는 효과를 얻을 수 있습니다.

먼저 fadeOut() 메소드를 이해해 봅시다. 이 방법은 일치하는 요소와 모든 형제 요소를 점진적으로 페이드 아웃하여 결국 사라지게 하는 데 사용됩니다. 이 방법은 요소의 불투명도를 변경하여 작동합니다. jQuery의 fadeOut() 메소드에는 몇 가지 선택적 매개변수가 있으며, 그 중 가장 일반적으로 사용되는 매개변수는 효과 시간의 밀리초 수를 정의하는 데 사용되는 속도 구성 매개변수입니다. 속도 매개변수 값이 "느리게", "빠르게" 또는 특정 밀리초 값인 경우 페이드 아웃 효과의 실행 속도가 다릅니다. 이 외에도 jQuery는 다양한 여유 효과를 얻기 위한 여유, 페이드아웃이 완료된 후 콜백 함수를 실행하기 위한 전체 매개 변수와 같은 몇 가지 추가 매개 변수도 제공합니다.

이제 마스크 레이어의 HTML을 포함하여 마스크 레이어가 3초 후에 자동으로 사라지도록 구현하는 jQuery 코드를 작성해 보겠습니다. 먼저 테스트용 마스크 레이어와 콘텐츠 영역을 포함하여 HTML 파일을 정의해야 합니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 三秒后遮罩消失</title>

<style type="text/css">
    #mask{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,.5);
        text-align: center;
        z-index: 9999;
        display: none;
    }

    #content{
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-100px;
        background:#ddd;
        color:#333;
        width:200px;
        height:100px;
        text-align:center;
        line-height:100px;
    }
</style>
</head>

<body>
    <div id="mask">
        <div id="content">这是一个测试内容区域</div>
    </div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">

</script>

</html>

로그인 후 복사

head 태그에는 두 개의 CSS 스타일 #mask 및 #content를 정의하여 각각 마스크 레이어를 켜고 테스트용 콘텐츠 영역의 스타일을 정의했습니다. 그 중 #mask는 위치를 절대값으로 설정하여 최상위 수준에서 전체 화면과 레이아웃을 표시하도록 합니다. 배경은 rgba(0,0,0,.5) 반투명 검정색입니다. text-align 속성은 콘텐츠 영역을 중앙에 배치합니다. z-index 속성은 마스크 레이어의 레벨을 웹 페이지의 다른 요소보다 높게 설정합니다. 표시 속성은 마스크 레이어의 기본 상태를 설정하며 초기 상태는 표시되지 않고 jQuery 스크립트가 표시를 제어할 때까지 기다립니다. #content 스타일은 마스크 레이어 중앙의 테스트 콘텐츠 영역을 차지하도록 설계되었으며 순수한 스타일 정의이며 JavaScript 구현에 영향을 주지 않습니다.

이제 마스크 레이어의 표시 및 사라짐을 제어하는 jQuery 스크립트를 작성해야 합니다. 마스크 사라지는 효과를 얻기 위해 jQuery의 setTimeout() 메서드를 사용하여 3초 후에 마스크 레이어의 fadeOut() 메서드를 트리거합니다. 코드는 다음과 같습니다.

<script type="text/javascript">
$(document).ready(function(){
    $("#mask").fadeIn();    //控制遮罩层的显示
    setTimeout(function(){
        $("#mask").fadeOut();   //控制遮罩层的隐藏
    },3000);        
});
</script>

로그인 후 복사

위의 jQuery 코드는 명확하고 간결합니다. 먼저 문서가 준비된 후 fadeIn() 메서드를 사용하여 마스크 레이어 표시를 제어합니다. setTimeout() 메소드는 함수와 시간 매개변수를 사용하며 지정된 시간 이후에 함수가 실행됩니다. 여기서는 3초의 시간을 설정하고, 시간이 지나면 fadeOut() 메서드를 실행하여 마스크 레이어를 점차적으로 페이드 아웃하고 최종적으로 숨깁니다. fadeOut() 메서드는 속도 매개변수를 사용하여 페이드아웃 효과의 지속 시간을 정의할 수 있지만 이 경우 자세히 설명할 필요는 없습니다.

위 코드를 완성한 후 브라우저에서 이 코드를 실행하면 마스크 레이어가 페이지에 나타났다가 3초 후에 자동으로 사라지는 것을 볼 수 있습니다. 페이지가 언로드된 후 마스크 레이어가 자동으로 사라지도록 코드를 HTML 페이지에 포함할 수 있습니다.

요약하자면, jQuery는 다양한 웹페이지 효과를 빠르고 쉽게 얻을 수 있도록 도와줍니다. 일반적인 인터랙티브 효과로서 마스크 레이어는 특히 웹사이트 개발에 흔히 사용됩니다. 이 기사에서는 jQuery의 fadeOut() 메서드와 setTimeout() 메서드를 사용하여 마스크 레이어가 3초 후에 자동으로 사라지는 효과를 구현합니다. 이는 편리하고 쉬운 구현 방법을 제공할 뿐만 아니라 웹 사이트 개발에서 jQuery를 유연하게 사용할 수 있음을 보여줍니다.

위 내용은 jquery 마스크는 3초 후에 사라집니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.