<html>

    <head>

        <title>js指定区域全屏</title>

        <style>

            #fulldiv {

                background: #fff;

                width: 100%;

                text-align: center;

                height: 100%;

            }

        </style>

    </head>

    <body>

        <h1>指定区域全屏测试</h1>

        <button id="btn">全屏按钮</button>

        <div id="content-main">

        <img src="C:\Users\guobin\Desktop\IMG_3163.PNG" />

        </div>

    </body>

    <script>

        var fullscreen = false;

        let btn = document.getElementById('btn');

        let fullarea = document.getElementById('content-main')

        btn.addEventListener('click',function(){   

            if (fullscreen) {       // 退出全屏

                if (document.exitFullscreen) {

                    document.exitFullscreen();

                } else if (document.webkitCancelFullScreen) {

                    document.webkitCancelFullScreen();

                } else if (document.mozCancelFullScreen) {

                    document.mozCancelFullScreen();

                } else if (document.msExitFullscreen) {

                    document.msExitFullscreen();

                }

            } else {        // 进入全屏

                if (fullarea.requestFullscreen) {

                    fullarea.requestFullscreen();

                } else if (fullarea.webkitRequestFullScreen) {

                    fullarea.webkitRequestFullScreen();

                } else if (fullarea.mozRequestFullScreen) {

                    fullarea.mozRequestFullScreen();

                } else if (fullarea.msRequestFullscreen) {

                    // IE11

                    fullarea.msRequestFullscreen();

                }

            }

            fullscreen = !fullscreen;

        })

    </script>

</html>

js指定区域全屏的更多相关文章

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

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

  2. js设置页面全屏

    html代码 <!-- 全屏按钮 --> <img id="alarm-fullscreen-toggler" src="/public/index/i ...

  3. 纯C#实现屏幕指定区域截屏

    以前在别的地方见过一个通过调用系统API实现屏幕截图的例子,从内心来说我不太喜欢在C#代码中出现这种情况,现在什么都讲“和谐”,我觉得这种做法就是破坏了我们的“和谐”代码,呵呵,开玩笑,有的时候,不通 ...

  4. FullPage.js – 轻松实现全屏滚动（单页网站）效果

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

  5. 《fullPage.js》创建全屏滚动的网站

    插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...

  6. H5中用js让页面全屏

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

  7. js控制浏览器全屏

    HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...

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

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

  9. HTML5 JS 实现浏览器全屏(F11的效果)

    项目中有需要使用JS来控制浏览器全屏的方法 DEMO地址: http://zhongxia245.github.io/demo/js2fullpanel.html function fullScree ...

随机推荐

  1. vue中slot组件的使用

    插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. Slot 是在组件模板中设置的用于在父组件中 ...

  2. Excel基础视频教程在线观看

    也许你已经在Excel中完成过上百张财务报表,也许你已利用Excel函数实现过上千次的复杂运算,也许你认为Excel也不过如此,甚至了无新意.但我们平日里无数次重复的得心应手的使用方法只不过是Exce ...

  3. Unity 围绕X、Y、Z旋转图例

    绿色:绕X 红色:绕Y 蓝色:绕Z PS:这是右手坐标系,Unity为左手坐标系 不知道啥叫左手右手?参见我的另一篇文章http://www.cnblogs.com/36bian/p/7571727. ...

  4. ZBrush中Tool工具的保存

    ZBrush软件的界面及操作方法与其他的三维软件完全不同,很多初学者常常会觉得有些困难,接下来我们就讲解一下ZBrush®最为基础的操作-Tool工具的保存. 首先要明白什么是Tool工具?我们创建的 ...

  5. jsp错误页面的处理

    局部的错误处理 1,errorpage 在错误页面指令page中声明errorpage="要显示的页面地址" 在要显示的页面page中声明iserrorpage="tru ...

  6. 路飞学城Python-Day33

    1.简述计算机操作系统中的“中断”的作用? 为什么有中断? 现代操作系统一般都是采用基于时间片的优先级调度算法,把CPU的时间划分为很细粒度的时间片,一个任务每次只能时间这么多的时间,时间到了就必须交 ...

  7. node——文件写入，文件读取

    ru //实行文件操作 //文件写入 //1.加载文件操作,fs模块 var fs = require('fs'); //2.实现文件写入操作 var msg='Hello world'; //调用f ...

  8. .net基础总复习(1)

    第一天 1.new关键字 (1) 创建对象 (2) 隐藏从父类那里继承过来的成员 2.访问修饰符 public: 公开的,公共的. private:私有的,只能在当前类的内部访问,类中的成员, 如果不 ...

  9. [spoj] HIGH - Highways (生成树计数)

    传送门 输入格式: 第一行一个整数T,表示测试数据的个数 每个测试数据第一行给出 n,m 分别表示点数与边数 接下来 m 行,每行给出两个数 a,b ,表示 a,b 之间有一条无向边 输出格式: 每个 ...

  10. freeswitch 编码协商

    编辑 /usr/local/freeswitch/conf/sip_profiles/internal.xml 添加注释     <param name="inbound-zrtp-p ...