美文网首页
JS实现全屏展示

JS实现全屏展示

作者: 小李不小 | 来源:发表于2024-01-11 17:59 被阅读0次

html 页面

 <div class="btns">
    <button type="button" id="exitBtn" class="btn" onClick="exitFullscreen()">退出全屏</button>
    <button type="button" id="btn" class="btn" onClick="fullScreen()">全屏</button>  
  </div>
  /**其他内容代码**/

实现全屏的功能代码:

function fullScreen() {
    var de = document.documentElement;
      if (de.requestFullscreen) {
          de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
          de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
          de.webkitRequestFullScreen();
      }
  }

退出全屏的功能代码:

function exitFullscreen() {
  if(document.exitFullscreen) {
       document.exitFullscreen();
   } else if(document.mozCancelFullScreen) {
       document.mozCancelFullScreen();
   } else if(document.webkitExitFullscreen) {
       document.webkitExitFullscreen();
   }
 }

相关文章

网友评论

      本文标题:JS实现全屏展示

      本文链接:https://www.haomeiwen.com/subject/pzplsdtx.html