이 글에서는 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 표시를 설정합니다.