Включить и отключить полноэкранный режим
Здесь рассмотрим, как можно по клику кнопки включить полноэкранный режим, что будет задействован в браузере при помощи кода код на JavaScript. Полный экран не всегда требуется, но иногда его очень даже полезно подключать, все зависит от того, что будет на мониторе. Во как пример в кино сайте, где вы плеер раскрыли, но все же он имеет свои значение, а здесь при клике на кнопку вы включаете нативный полноэкранный режим, что позволяет смотреть на более большом размере экрана. Плюс в том, что нам не нужно будет подключать сочетание знаков, как в название упомянули, что все производится в один клик курсора. Как все просмотрели, и вам уже не требуются большие широты обозрение, то по аналогичной кнопке совершаем 2 клик, что экран приводится в состояние, что идет по умолчанию. Для полноценной работы здесь потребуется небольшой код, что изначально выстроен на JavaScript, который идет для разворота и также в стандартное решение для режима окна браузера. Как сделать по клику полноэкранный режим на JavaScriptВ данном мануале представлен удобный способ, что позволяет для начало преобразовать и покинуть полной экран на любом браузере. Что по кнопке, то здесь дизайн можно самостоятельно выстроить, чтоб соответствовал основному стилю сайта. ![]() Также важно знать, что скачав или перейти на demo страницу, то там стандартная кнопка. Здесь ее полностью изменил, а точнее добавил стилей, где появился дизайн и анимация, виде мигаюшей кнопки. Установка: HTML Код <button id="polnoekranka" class="knopaves"></button> CSS Код .knopaves { margin: 2%; padding: 1% 2%; border-radius: 18px; background: #423b3b; color: #e1dddd; font-size: 16px; border: 2px solid #759ba9; cursor: pointer; animation: inout 1s ease infinite; } @keyframes inout { 0% { -webkit-box-shadow: 0 0 0 0px rgba(251 249 198 / 36%); -moz-box-shadow: 0 0 0 0px rgba(251 249 198 / 36%); box-shadow: 0 0 0 0px rgba(251 249 198 / 36%); } 100% { -webkit-box-shadow: 0 0 0 20px rgba(225 224 214 / 96%); -moz-box-shadow: 0 0 0 20px rgba(225 224 214 / 96%); box-shadow: 0 0 0 20px rgb(30 111 139 / 26%); } } JS Код let fullscreen; let fsEnter = document.getElementById('polnoekranka'); let fsEnterIn = "Войти в полноэкранный режим"; let fsEnterOut = "Выйти из полноэкранного режима"; fsEnter.innerHTML = fsEnterIn; fsEnter.addEventListener('click', function (e) { e.preventDefault(); if (!fullscreen) { fullscreen = true; document.documentElement.requestFullscreen(); fsEnter.innerHTML = fsEnterOut; } else { fullscreen = false; document.exitFullscreen(); fsEnter.innerHTML = fsEnterIn; } }); if (e.keyCode === 27) { fsEnter.innerHTML = fsEnterIn; } Теперь вы можете выставить на данном материале представленную кнопку, и вывести надпись или кнопку, что отвечает за функции подключение и отключение. Это может быть на совершенно разных страницах, так, где вам необходимо больше создавать обозрение. Демонстрация Источник: atuin.ru |
Поделиться в социальных сетях
Материал разместил
Комментарии: 0 | |