html代码

<!-- 全屏按钮 -->

    <img id="alarm-fullscreen-toggler" src="/public/index/images/open.png" alt="全屏按钮" />

js代码

    // 设置全屏

$('#alarm-fullscreen-toggler').on('click', function (e) {

    var element = document.documentElement;     // 返回 html dom 中的root 节点 <html>

    if(!$('body').hasClass('full-screen')) {

        $('body').addClass('full-screen');

        $('#alarm-fullscreen-toggler').addClass('active');

        // 判断浏览器设备类型

        if(element.requestFullscreen) {

            element.requestFullscreen();

        } else if (element.mozRequestFullScreen){   // 兼容火狐

            element.mozRequestFullScreen();

        } else if(element.webkitRequestFullscreen) {    // 兼容谷歌

            element.webkitRequestFullscreen();

        } else if (element.msRequestFullscreen) {   // 兼容IE

            element.msRequestFullscreen();

        }

        // 切换全屏按钮

        $('#alarm-fullscreen-toggler').attr('src','/public/index/images/close.png');

    } else {            // 退出全屏

        console.log(document);

        $('body').removeClass('full-screen');

        $('#alarm-fullscreen-toggler').removeClass('active');

        //  退出全屏

        if(document.exitFullscreen) {

            document.exitFullscreen();

        } else if (document.mozCancelFullScreen) {

            document.mozCancelFullScreen();

        } else if (document.webkitCancelFullScreen) {

            document.webkitCancelFullScreen();

        } else if (document.msExitFullscreen) {

            document.msExitFullscreen();

        }

        // 切换全屏按钮

        $('#alarm-fullscreen-toggler').attr('src','/public/index/images/open.png');

    }

});

js设置页面全屏的更多相关文章

  1. H5中用js让页面全屏

    概述 意外的发现一个网页有一个按钮能使网页全屏,查了下代码发现是H5的全屏api,于是就查了下资料,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: 利用js如何做到让页面全屏和不全屏功能 ...

  2. 学习笔记： js插件 —— fullPage.js （页面全屏滚动）

    fullPage.js (页面全屏滚动) 必须依赖 jquery-ui.min.js,   233K 14760个星. 以后有时间再看. API挺全 https://github.com/alvaro ...

  3. css设置页面全屏背景

    .background { background: url(xxx.png); background-size: 100% 100%; height: 100%; position: fixed; w ...

  4. HTML页面全屏/退出全屏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Android开发 - 设置DialogFragment全屏显示

    默认的DialogFragment并不是全屏,但有些需求需要我们将对话框设置为全屏(内容全屏),Android并没有提供直接的API,通过其它不同的方法设置全屏在不同的机型上总有一些诡异的问题,经过测 ...

  6. 01、Windows Store APP 设置页面横竖屏的方法

    在 windows phone store app 中,判断和设置页面横竖屏的方法,与 silverlight 中的 Page 类 不同,不能直接通过 Page.Orientation 进行设置.而是 ...

  7. 仿新浪游戏频道js多栏目全屏下拉菜单导航条

    仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...

  8. VM virtualBox设置无缝全屏

    设置之前:

  9. js指定区域全屏

    <html>     <head>         <title>js指定区域全屏</title>         <style>      ...

随机推荐

  1. Ubuntu 16.04 catkin_make 常见操作

    参考博客:https://answers.ros.org/question/54178/how-to-build-just-one-package-using-catkin_make/ 1. catk ...

  2. elasticsearch中mapping的_source和store的笔记(转)

    原文地址: https://www.cnblogs.com/zklidd/p/6149120.html 0.故事引入 无意中看到了ES的mapping中有store字段,作为一个ES菜鸡,有必要对这个 ...

  3. 【转】kettle7.1资源库无法打开，找不到connect按钮的问题处理

    转自:https://www.aboutyun.com/home.php?mod=space&uid=71645&do=blog&id=3535 kettle是一个比较好用的E ...

  4. 使用 Alibaba 的 Homebrew 镜像源进行加速

    使用 Alibaba 的 Homebrew 镜像源进行加速 平时我们执行 brew 命令安装软件的时候,跟以下 3 个仓库地址有关: brew.git homebrew-core.git homebr ...

  5. VisualVM使用

    sualVM是JDK自带的一个用于Java程序性能分析的工具 在JDK安装目录的bin文件夹下名称为 jvisualvm.exe 在左侧选择应用 (1)概述 应用程序和运行时环境的基本信息 基本参数 ...

  6. obj.GetType().GetCustomAttributes

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. Codeforces Round #249 (Div. 2) C. Cardiogram

    C. Cardiogram time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  8. 如何使用RedisTemplate访问Redis数据结构之Zset

    Redis的ZSet数据结构 Redis 有序集合和无序集合一样也是string类型元素的集合,且不允许重复的成员. 不同的是每个元素都会关联一个double类型的分数.redis正是通过分数来为集合 ...

  9. bind2nd

    bind2nd template <class Operation,class T> binder2nd <Operation> bind2nd(const Operation ...

  10. Go基础编程实践（一）—— 操作字符串

    修剪空格 strings包中的TrimSpace函数用于去掉字符串首尾的空格. package main import ( "fmt" "strings" ) ...