JS实现指定区域的全屏显示功能示例

刚坐在车里就开始电闪雷鸣。听着隆隆的雷声,没有恐慌,到有几分振奋人心的舒心感、酣畅淋漓感。朝外望去,突然间,狂风夹杂着骤雨席卷而来,一泻千里。瞬间暴雨如注,打在地上,溅起朵朵浪花,在热浪的蒸腾下激起层层水雾。满大街是慌乱的人群,行人跑着、叫喊着,唧唧喳喳的赶着在房檐下躲雨。这时候伞是没有用的,挡不住狂风暴雨的袭击,无论是带了伞的,还是没带伞的,全都躲在了房檐下。

本文实例讲述了JS实现指定区域的全屏显示功能。分享给大家供大家参考,具体如下:

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>www.haodaima.com js指定区域全屏</title>
    <style>
      #fulldiv {
        background: #fff;
        width: 100%;
        text-align: center;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <h1>指定区域全屏测试</h1>
    <button id="btn">全屏按钮</button>
    <div id="fulldiv">
      <h1>这里是全屏显示的内容</h1>
    </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 {    // 进入全屏
        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代码运行工具http://tools.haodaima.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

本文JS实现指定区域的全屏显示功能示例到此结束。要装进一杯新泉,你就必须倒掉已有的陈水;要获取一枝玫瑰,你就必须放弃到手的蔷薇;要多一份独特的体验,你就必须多一份心灵的创伤。谢谢大家支持!

您可能有感兴趣的文章
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题

微信小程序功能之全屏滚动效果的实现代码

react-native-video实现视频全屏播放的方法

元素全屏的设置与监听实例

layer弹出层全屏及关闭方法