<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. 自动化框架的两种断言设计(pytest 版)

    自动化测试断言失败时,根据不同业务场景,可能需要立即终止或继续执行.这里以 Appium + pytest 为例. 一. 断言失败立即终止 用途一:用例的预期结果是其他用例的前提条件时,assert ...

  2. iOS 11 APP 设计中的几个 UI 设计细节

    Apple 官网看了 iOS 11 的介绍,发现有不少的更新哦,比如控制中心.Siri.Live Photo 等等,总体来说都有很多不错的体验,不过本文不介绍功能,只说视觉界面. 在 iOS 11 的 ...

  3. Java并发--线程安全策略

    1 不可变对象 用不可变对象保证线程安全,是相当于不让线程并发,逃避了并发. 不可变对象就是指一个类的实例化对象不可变.比如String类的实例 主要方法有: 将类声明为final 将所有成员声明为 ...

  4. 关于css3背景图片渐变的规则

    1. Webkit引擎的CSS3径向渐变语法        Webkit引擎下的老版本语法:-webkit-gradient([<type>],[<position> || & ...

  5. oracle中单引号的处理

    当想让输出的结果中字段带有单引号', 场景一:连续三个单引号''' select '''helin''' from dual; ---'helin' 场景二:拼接字段的结果集--连续4个单引号 sel ...

  6. Map的四种遍历方法

    1.取值遍历 for(String key:map.keySet()){ System.out.println("key="+key+"and value=" ...

  7. 用pycharm运行django项目

    [点击]run -> Edit Configrations 弹出如下页面 点击“+” 点击Django server 在弹出页面的host填0.0.0.0 点击这个“文件夹” 点击‘+’后填下面 ...

  8. 《你又怎么了我错了行了吧》第九次团队作业：Beta冲刺与验收准备

    项目 内容 这个作业属于哪个课程 软件工程 这个作业的要求在哪里 实验十三 团队作业9 团队名称 你又怎么了我错了行了吧 作业学习目标 (1)掌握软件黑盒测试技术: (2)学会编制软件项目总结PPT. ...

  9. IE9以下版本兼容h5标签

    随着html5(后面用h5代表)标签越来越广泛的使用,IE9以下(IE6-IE8)不识别h5标签的问题让人很是烦恼. 在火狐和chrome之类的浏览器中,遇到不认识的标签,只要给个display:bl ...

  10. java中Collection 与Collections的区别

    1. Collection是集合类的一个顶级接口,其直接继承接口有List与Set 而Collections则是集合类的一个工具类/帮助类,其中提供了一系列静态方法,用于对集合中元素进行排序.搜索以及 ...