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

2024-05-06 16:50:15

字体：大中小

来源：转载

供稿：网友

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

<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>www.vevb.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>

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

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：使用React手写一个对话框或模态框的方法示例

下一篇：node.js ws模块搭建websocket服务端的方法示例