JS實(shí)現(xiàn)指定區(qū)域的全屏顯示功能示例

發(fā)布時(shí)間：2020-09-05 15:18:58 來(lái)源：腳本之家閱讀：201 作者：guanguan0_0 欄目：web開(kāi)發(fā)

本文實(shí)例講述了JS實(shí)現(xiàn)指定區(qū)域的全屏顯示功能。分享給大家供大家參考，具體如下：

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>www.jb51.net js指定區(qū)域全屏</title>
    <style>
      #fulldiv {
        background: #fff;
        width: 100%;
        text-align: center;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <h2>指定區(qū)域全屏測(cè)試</h2>
    <button id="btn">全屏按鈕</button>
    <div id="fulldiv">
      <h2>這里是全屏顯示的內(nèi)容</h2>
    </div>
  </body>
  <script>
    var fullscreen = false;
    let btn = document.getElementById('btn');
    let fullarea = document.getElementById('fulldiv')
    btn.addEventListener('click',function(){  
      if (fullscreen) {    // 退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {    // 進(jìn)入全屏
        if (fullarea.requestFullscreen) {
          fullarea.requestFullscreen();
        } else if (fullarea.webkitRequestFullScreen) {
          fullarea.webkitRequestFullScreen();
        } else if (fullarea.mozRequestFullScreen) {
          fullarea.mozRequestFullScreen();
        } else if (fullarea.msRequestFullscreen) {
          // IE11
          fullarea.msRequestFullscreen();
        }
      }
      fullscreen = !fullscreen;
    })
  </script>
</html>

感興趣的朋友還可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

向AI問(wèn)一下細(xì)節(jié)

JS實(shí)現(xiàn)指定區(qū)域的全屏顯示功能示例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽