网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

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

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>www.jb51.net 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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

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

上一篇:node.js ws模块搭建websocket服务端的方法示例
下一篇:使用React手写一个对话框或模态框的方法示例
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap