반응형
브라우저를 전체화면(풀스크린)으로 전환해주는 버튼 스크립트.
전체화면 버튼을 클릭하면 웹브라우저가 전체화면으로 변경되는 동시에, 창모드 버튼이 활성화 되고 전체화면 버튼은 비활성화 된다.
창모드를 버튼 클릭시 웹브라우저는 이전 크기로 돌아가며 전체화면 버튼이 활성화되고 창모드 버튼은 안보이게 된다.
HTML
<a class="fullscreen" href="#" title="전체화면" onclick="openFullScreenMode()">
전체화면
</a>
<a class="close-fullscreen" href="#" title="창모드" onclick="closeFullScreenMode()">
창모드
</a>
CSS
.close-fullscreen {display: none}
javascript
var doc = document.documentElement;
// 전체화면 설정
function openFullScreenMode() {
if (doc.requestFullscreen)
doc.requestFullscreen();
else if (doc.webkitRequestFullscreen) // Chrome, Safari (webkit)
doc.webkitRequestFullscreen();
else if (doc.mozRequestFullScreen) // Firefox
doc.mozRequestFullScreen();
else if (doc.msRequestFullscreen) // IE or Edge
doc.msRequestFullscreen();
$('.fullscreen').hide();
$('.close-fullscreen').show();
}
// 전체화면 해제
function closeFullScreenMode() {
if (document.exitFullscreen)
document.exitFullscreen();
else if (document.webkitExitFullscreen) // Chrome, Safari (webkit)
document.webkitExitFullscreen();
else if (document.mozCancelFullScreen) // Firefox
document.mozCancelFullScreen();
else if (document.msExitFullscreen) // IE or Edge
document.msExitFullscreen();
$('.fullscreen').show();
$('.close-fullscreen').hide();
}
반응형
'코딩 > 제이쿼리' 카테고리의 다른 글
[jquery] 부드럽게 화면 상단으로 이동하는 버튼 만들기 (0) | 2024.09.02 |
---|---|
[페이지인식] 페이지 인식소스 업그레이드 버전 (0) | 2022.06.01 |
[jquery] 셀렉트박스 선택시 다른 셀렉트박스 설정옵션 (0) | 2020.09.16 |
bootstrap 드롭다운 메뉴 hover시 작동하도록 (1) | 2020.09.01 |
document ready 를 순수 javascript로 (1) | 2019.04.24 |