마스크 레이어로 팝업 비디오 효과를 구현하기 위한 js 클릭 버튼의 코드 예제 분석

이 글에서는 js마스크 레이어로 팝업동영상 효과를 구현하는 버튼을 주로 소개합니다. 필요한 친구들은

이 글의 예시입니다. js는 CSS와

JavaScript를 포함하는 마스크 레이어로 팝업 비디오 효과를 구현하기 위해 버튼을 클릭합니다. 구체적인 내용은 다음과 같습니다.

최종 표시 효과: 빨간색 버튼을 클릭하면 마스크 레이어가 포함된 비디오 화면이 나타납니다.

노란색 영역을 클릭하면 화면이 닫힙니다. 영상을 촬영하고 원래 상태로 돌아갑니다.

페이지의 메인 코드: 메인에는 주로 표시되는 버튼을 제어하는 ​​a가 포함되어 있습니다. ID 값으로 설정합니다.

<p class="main">
  <a href="javascript:;" class="video" id="video"></a>
</p>

다음 코드는 동영상 표시 효과를 제어하는 ​​데 사용됩니다. .video-btn에는 동영상 표시 영역과 오른쪽에 노란색 닫기 버튼이 포함되어 있습니다(노란색 닫기 버튼이 좀 보기 흉하지만). ).

id="shadow"는 마스크 레이어를 제어하는 ​​데 사용됩니다. 가장 중요한 것은 각 요소의 id 값을 설정하는 것이며 그러면 js가 각 요소를 쉽게 호출할 수 있습니다.

 <p class="video-btn" id="video-btn">
   <p class="video-area" id="video-area"></p>
   <a class="video-shut" id="video-shut">x</a>
 </p>
 <p id="shadow"></p>

CSS를 살펴보겠습니다

먼저 video-btn 영역을 설정합니다.

.video-btn{
      position: absolute;
      width:600px;
      height: 300px;
      background:black;
      top:50%;
      left: 50%;
      margin-top: -150px;
      margin-left:-300px;
      display: none;
      z-index: 101;
    }
 .video-area{
      float:left;
      width:500px;
      height: 300px;
      background:red;
    }
.video-shut{
      height:100px;
      width:100px;
      font-size:40px;
      color:pink;
      float:left;
      text-align: center;
      /*line-height: 50px;*/
      background: yellow;
      display: block;
      padding-top:30px;
    }

그런 다음 마스크 레이어의 CSS를 설정하세요

 #shadow{
      position: absolute;
      opacity: 0.5;
      filter:alpha(opacity=50);
      bottom:0;
      left: 0;
      right: 0;
      top: 0;
      background:black;
      z-index: 100;
      display: none;
    }

핵심 1: 여기서 두 개의 P를 설정하세요. 절대 위치 지정을 사용하면 문서 흐름에서 벗어날 수 있습니다.

포인트 2: 마스크 레이어는 화면 전체를 타일링할 수 있도록 하단, 왼쪽, 오른쪽, 상단 값을 0으로 설정해야 합니다.

포인트 3: 다음 두 p를 표시하도록 설정하세요: 없음. 사용자가 처음에 이 두 개의 p를 보지 않도록 하십시오. 그렇지 않으면 이 두 개가 입력되자마자 보는 것이 보기 흉할 것입니다.

포인트 4: z-index 값을 설정하려면 노란색 버튼과 동영상을 표시하는 p의 우선순위가 마스크 레이어입니다. 그렇지 않으면 클릭할 수 없습니다.

이제 js를 시작하세요. 처음 5개에 대한 ID 할당을 받으세요. 그런 다음 노란색 버튼을 클릭하면 이벤트에 응답합니다.

클릭 이벤트 1: 동영상이 있는 위치를 표시: 차단으로 설정합니다. 마스크 레이어가 위치한 p를 표시: 블록으로 설정합니다. 동시에 영상 화면 p에는 Tudou 영상이 표시됩니다. 해당 링크는 Tudou.com의 공유 링크입니다.

클릭 이벤트 2: 노란색 x 버튼을 클릭하면 이 두 p가 숨겨져야 합니다. 즉, 두 개의 p:none 표시를 설정합니다.