Fullscreen 全屏效果

admin發表於2019-08-06

在HTML5之前，實現圖片、視訊或者其他元素的全屏效果比較困難。

使用HTML5 新增的全屏 API，可以將使用者的注意力導向特定元素，同時隱藏背景或轉移對其他應用的注意力。

當前W3C全屏規範並達到最終版本，所以大多數瀏覽器供應商都使用唯一識別符號為 API 新增字首。

Fullscreen API:

（1）.requestFullscreen方法參閱requestFullscreen()方法一章節。

（2）.exitFullscreen方法參閱exitFullscreen()方法一章節。

（3）.allowfullscreen屬性參閱allowfullscreen屬性一章節。

（4）.fullscreenError事件參閱fullscreenError事件一章節。

（5）.fullscreenchange事件參閱fullscreenchange事件一章節。

（6）.:fullscreen參閱:fullscreen偽類選擇器一章節。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
 
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.fullScreen {
  width: 600px; 
  height: 350px; 
  text-align:center;
  line-height:350px;
}
#top {
  background-color: red;
}
#bottom {
  background-color: green;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var inFullScreen = false;
 
  var fsClass = document.getElementsByClassName("fullScreen");
  for (var i = 0; i < fsClass.length; i++) {
    fsClass[i].addEventListener("click", function (evt) {
      if (inFullScreen == false) {
        makeFullScreen(evt.target);
      } else {
        reset();
      }
    }, false);
  }
  function makeFullScreen(divObj) {
    if (divObj.requestFullscreen) {
      divObj.requestFullscreen();
    }
    else if (divObj.msRequestFullscreen) {
      divObj.msRequestFullscreen();
    }
    else if (divObj.mozRequestFullScreen) {
      divObj.mozRequestFullScreen();
    }
    else if (divObj.webkitRequestFullscreen) {
      divObj.webkitRequestFullscreen();
    }
    inFullScreen = true;
    return;
  }
 
  function reset() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
    else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
    inFullScreen = false;
    return;
  }
}
</script>
</head>
<body>
<div id="top" class="fullScreen">螞蟻部落一</div>
<div id="bottom" class="fullScreen">螞蟻部落二</div>
</body>
</html>

上面的程式碼演示了全屏效果，具體細節可以檢視對應的API。

相關文章