zoukankan      html  css  js  c++  java
  • js实现Html网页全屏效果

     1  //全屏
     2         function toggleFullScreen() {
     3             if (!document.fullscreenElement && // alternative standard method
     4                 !document.mozFullScreenElement && !document.webkitFullscreenElement) {// current working methods
     5                 if (document.documentElement.requestFullscreen) {
     6                     document.documentElement.requestFullscreen();
     7                 } else if (document.documentElement.mozRequestFullScreen) {
     8                     document.documentElement.mozRequestFullScreen();
     9                 } else if (document.documentElement.webkitRequestFullscreen) {
    10                     document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    11                 }
    12             } else {
    13                 if (document.cancelFullScreen) {
    14                     document.cancelFullScreen();
    15                 } else if (document.mozCancelFullScreen) {
    16                     document.mozCancelFullScreen();
    17                 } else if (document.webkitCancelFullScreen) {
    18                     document.webkitCancelFullScreen();
    19                 }
    20             }
    21         }

    直接调用即可:

    <button onclick="toggleFullScreen()">全屏模式</button>

    原创文章,转载请说明出处,谢谢合作
  • 相关阅读:
    购物车案例详解。利用cookie
    设计模式8种
    设计模式介绍
    Promise
    面向对象-拖拽
    本地存储
    闭包和继承
    move.js
    CDM指南之Agent管理
    失业的程序员九创业就是一场戏
  • 原文地址:https://www.cnblogs.com/lwl80/p/14643423.html
Copyright © 2011-2022 走看看