公司有一个需求就是点击某一个按钮实现全屏切换功能，然后呢我就在网上扒了段代码。封装了一下。使用的小伙伴们可以看看哦！

切换全屏代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>切换全屏代码</title>

    </head>

    <body>

        <input type="button" value="全屏" onclick="Full_switch.fullScreen();" />

        <input type="button" value="退出全屏" onclick="Full_switch.exitFullScreen();" />

        <script type="text/javascript">

            (function(win) {

                var switchs = {

                    fullScreen: function() { //全屏方法

                        var el = document.documentElement;

                        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;

                        if(typeof rfs != "undefined" && rfs) {

                            rfs.call(el);

                        } else if(typeof win.ActiveXObject != "undefined") {

                            var wscript = new ActiveXObject("WScript.Shell");

                            if(wscript != null) {

                                wscript.SendKeys("{F11}");

                            }

                        }

                    },

                    exitFullScreen: function() { //退出全屏方法

                        var el = document,

                            cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,

                            wscript;

                        if(typeof cfs != "undefined" && cfs) {

                            cfs.call(el);

                            return;

                        }

                        if(typeof win.ActiveXObject != "undefined") {

                            wscript = new ActiveXObject("WScript.Shell");

                            if(wscript != null) {

                                wscript.SendKeys("{F11}");

                            }

                        }

                    },

                }

                win.Full_switch =switchs;

            })(window);

        </script>

    </body>

</html>

预览地址

点击查看

js 切换全屏的更多相关文章

  1. js切换全屏

    直接撸代码 //<a id="fullscreen">切换按钮</a> $('#fullscreen').bind('click',function () ...

  2. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  3. js之切换全屏和退出全屏实现

    应用场景:比如很多网页游戏全屏之类的,或者是网上看小说等. 核心代码: //控制全屏 function enterfullscreen() { //进入全屏 $("#fullscreen&q ...

  4. js控制全屏及退出全屏

    js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...

  5. OSG addEventHandler W键显示网格 L键控制光照 F键切换全屏窗口 S键显示统计数据 事件处理器

    #include <osgGA/StateSetManipulator> #include <osgViewer/ViewerEventHandlers> // add the ...

  6. fullpage.js jq全屏滚动插件

    fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下 ...

  7. JS框架_(JQuery.js)文章全屏动画切换

    百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...

  8. JS 实现全屏预览 F11功能

    老是不通过,没办法,只能是重新发布了,反正我就是杠上了,大大小小写过很多前端特效,当然也经常在网上copy或者修改人家的代码,我觉得也挺好的,为什么?!因为我想这样,你能怎么办,打我?少废话,直接上代 ...

  9. 自己用js实现全屏滚动

    参照fullPage.js的效果,用自己的想法实现的. 实现的效果:1.全屏滚动,滚动一下齿轮就会滚动全屏. 2.自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏. 下一步计划: 1.改 ...

随机推荐

  1. Mysql主从复制原理及配置

    Mysql主从复制原理及配置 1.复制概述 Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的数据复制到其 ...

  2. PHP MYSQL 搜索周边坐标，并计算两个点之间的距离

    搜索附近地点,例如,坐标(39.91, 116.37)附近500米内的人,首先算出“给定坐标附近500米”这个范围的坐标范围. 虽然它是个圆,但我们可以先求出该圆的外接正方形,然后拿正方形的经纬度范围 ...

  3. Python自学笔记-字符串编码（来自廖雪峰的官网Python3）

    感觉廖雪峰的官网http://www.liaoxuefeng.com/里面的教程不错,所以学习一下,把需要复习的摘抄一下. 以下内容主要为了自己复习用,详细内容请登录廖雪峰的官网查看.   1.理解变 ...

  4. Python统计列表中的重复项出现的次数的方法

    本文实例展示了Python统计列表中的重复项出现的次数的方法,是一个很实用的功能,适合Python初学者学习借鉴.具体方法如下:对一个列表,比如[1,2,2,2,2,3,3,3,4,4,4,4],现在 ...

  5. 程序员 各种PDF格式电子书--免费网盘资源

    Java <设计模式之禅(完整高清版)> 链接:http://pan.baidu.com/s/1bo7noMb 密码:5kve  <重构_改善既有代码的设计> 链接:http: ...

  6. asp.net或javascript判断是否手机访问

    /// <summary> /// 判断手机用户UserAgent /// </summary> /// <returns></returns> pri ...

  7. Linux软件安装管理

    1.软件包管理简介 1.软件包分类 源码包 脚本安装包 二进制包(RPM包.系统默认包) 2.源码包 源码包的优点是: 开源,如果有足够的能力,可以修改源代码 可以自由选择所需要的功能 软件设计编译安 ...

  8. mySQL：两表更新（用一个表更新另一个表）的SQL语句

    用一个表中的字段去更新另外一个表中的字段, MySQL 中有相应的 update 语句来支持,不过这个 update 语法有些特殊.看一个例子就明白了. create table student ( ...

  9. Tomcat 笔记-设置虚拟主机

    通过作用虚拟主机,可以使多个不同域名的网站共存于一个Tomcat中 在tomcat的server.xml文件中添加主机名: <Host name="hostname" app ...

  10. js自调用函数的实现方式

    我们知道,js中定义自调用函数通常使用下列方式: (function () { alert("函数2"); })(); 事实上,使用括号包裹定义函数体,解析器将会以函数表达式的方式 ...