JavaScript 圖片全屏

admin發表於2020-04-13
JavaScript

通過 HTML5 實現全屏效果非常簡單，本文不考慮相容性問題。

下面介紹一下如何利用 Fullscreen API 如何實現<img> 圖片的全屏效果。

關於 Fullscreen 更多內容參閱 Fullscreen 全屏效果一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{text-align: center;}
</style>
<script>
window.onload = ()=> {
  let inFullScreen = false;
  let img = document.getElementById("ant");

  img.addEventListener("click", function (evt) {
    if (inFullScreen == false) {
      makeFullScreen(this);
    } else {
      reset();
    }
  }, false);

  function makeFullScreen(divObj) {
    divObj.requestFullscreen();
    inFullScreen = true;
    return;
  }
   
  function reset() {
    document.exitFullscreen();
    inFullScreen = false;
    return;
  }
}
</script>
</head>
<body>
  <img id="ant" src="static/image/common/logo_sc.png">
</body>
</html>

上述程式碼中，點選圖片可以實現圖片全屏和退出全屏操作。

相關文章