ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Включить и отключить полноэкранный режим

Включить и отключить полноэкранный режим

Здесь рассмотрим, как можно по клику кнопки включить полноэкранный режим, что будет задействован в браузере при помощи кода код на JavaScript. Полный экран не всегда требуется, но иногда его очень даже полезно подключать, все зависит от того, что будет на мониторе. Во как пример в кино сайте, где вы плеер раскрыли, но все же он имеет свои значение, а здесь при клике на кнопку вы включаете нативный полноэкранный режим, что позволяет смотреть на более большом размере экрана.

Плюс в том, что нам не нужно будет подключать сочетание знаков, как в название упомянули, что все производится в один клик курсора. Как все просмотрели, и вам уже не требуются большие широты обозрение, то по аналогичной кнопке совершаем 2 клик, что экран приводится в состояние, что идет по умолчанию. Для полноценной работы здесь потребуется небольшой код, что изначально выстроен на JavaScript, который идет для разворота и также в стандартное решение для режима окна браузера.

Как сделать по клику полноэкранный режим на JavaScript

В данном мануале представлен удобный способ, что позволяет для начало преобразовать и покинуть полной экран на любом браузере. Что по кнопке, то здесь дизайн можно самостоятельно выстроить, чтоб соответствовал основному стилю сайта.

Включение полноэкранного режима с браузера

Также важно знать, что скачав или перейти на demo страницу, то там стандартная кнопка. Здесь ее полностью изменил, а точнее добавил стилей, где появился дизайн и анимация, виде мигаюшей кнопки.

Установка:

HTML

Код

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%);
  }
}

Код

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

27 Октября 2021 Загрузок: 1 Просмотров: 1465 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0