JS实现全屏展示

2024-01-11  本文已影响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();
   }
 }

上一篇 下一篇

猜你喜欢

热点阅读