js实现窗口全屏示例详解

前言

该 demo 包含全屏事件、退出全屏事件以及屏幕状态改变的钩子函数的封装
以下是一个完整示例，只需整体拷贝下来运行即可(注意引入了 jquery)

请在这里查看示例☞ fullscreen示例

示例

 
 
 
 
  * {
   margin: 0;
   padding: 0;
  }
  
  html:-moz-full-screen { 
   background: grey; 
  } 
  html:-webkit-full-screen { 
   background: grey; 
  } 
  html:fullscreen { 
   background: grey; 
  }

  div {
   width: 100px;
   height: 100px;
   background: blue;
  }
  img {
   width: 80px;
   height: 80px;
  }
 


 窗口全屏
 div全屏
 img全屏
 退出全屏
 
  
 

参考文章

用html5 js实现点击一个按钮达到浏览器全屏效果

Native Fullscreen Javascript API (plus jQuery plugin)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。