• HTML5全屏


    HTML5规范允许用户自定义网页上任一元素全屏显示。
    1、Node.requestFullScreen() 开启全屏显示
    2、Node.cancelFullScreen() 关闭全屏显示由于其兼容性原因,不同浏览器需要添加前缀如:
    webkit内核浏览器:webkitRequestFullScreen、webkitCancelFullScreen,如chrome浏览器。
    Gecko内核浏览器:mozRequestFullScreen、mozCancelFullScreen,如火狐浏览器。
    ms 微软 msRequestFullscreen
    3、document.fullScreen检测当前是否处于全屏
    不同浏览器需要添加前缀
    document.webkitIsFullScreen、document.mozFullScreen
    全屏伪类选择器 也有兼容性问题 需要添加前缀思密达
    :full-screen 、:-webkit-full-screen {}、:moz-full-screen {}

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
     div:-webkit-full-screen {   /* 注意兼容性问题  全屏显示伪类选择器 */
      background-color: pink;
     }
     </style>
    </head>
    <body>
    <div>
     <img src="pic1.png" height="300"  alt="">
     <button id="full">全屏显示</button>
     <button id="cancelFull">取消全屏</button>
     <button id="isFull">是否全屏</button>
    </div>
     <script>
     // 全屏显示可以是任意元素
     // H5 API 存在兼容性问题  ie9 +  
     // 即使高版本浏览器有兼容性问题  
     // 不同浏览器需要添加不同的前缀 webkit  moz  o  ms 
     var div = document.querySelector("div");
     // 1 单击全屏显示
     document.querySelector("#full").onclick = function() {
      // div.webkitRequestFullScreen(); 开启全屏
      // 能力检测  做一个兼容性的解决方法
       if(div.requestFullScreen) {  // 正常浏览器 
        div.requestFullScreen();
       } else if (div.webkitRequestFullScreen) {  // webkit 内核
        div.webkitRequestFullScreen();
       } else if (div.mozRequestFullScreen) {  // moz
        div.mozRequestFullScreen();
       } else if (div.msRequestFullscreen) {  // ms 微软  这里面有个坑 别掉进去了
        div.msRequestFullscreen(); //  ms 里面这样写msRequestFullscreen()     s是小写的  
       } else {   // 欧朋
        div.oRequestFullScreen();
       }
     }
     // 2 取消全屏  跟元素没有关系  跟 document
     document.querySelector("#cancelFull").onclick = function() {
       document.webkitCancelFullScreen();  // document 退出全屏
     }
     // 3 是否全屏显示
      document.querySelector("#isFull").onclick = function() {
       alert(document.webkitIsFullScreen); // webkit是否存在 全屏状态
     }
     </script>
    </body>
    </html>
    别废话,拿你代码给我看。
  • 相关阅读:
    JS中的各种函数
    JS循环 && JS语法
    对JS基础学习的重新理解
    vue系列---【vue项目如何使用less语法?】
    vue系列---【vue项目如何利用图形化界面安装axios依赖?】
    vue系列---【vue项目如何使用图形化界面自动安装element-ui,实现按需导入?】
    vue系列---【如何使用vue ui图形化界面创建一个vue项目?(注意:适用于3.0.x版本)】
    vue系列---【vue项目如何使用element-ui?】
    vue系列---【如何安装vue脚手架?】
    Oracle系列---【PL/SQL Developer如何连接远程oracle数据库?】
  • 原文地址:https://www.cnblogs.com/lvxueyang/p/13707460.html
Copyright © 2020-2023  润新知