zoukankan      html  css  js  c++  java
  • Fullscreen API 全屏显示网页

    可参考文档:http://blog.csdn.net/tywali/article/details/8623938

    脚本代码

     <script type="text/javascript">  
            var support = { 
                fullscreen: "fullscreen" in document || "webkitIsFullScreen" in document || "mozFullScreen" in document 
            };
    
            $.fn.fullscreen = function (e) {
                return "onfullscreenchange" in document ? this.bind("fullscreenchange", e) : "onwebkitfullscreenchange" in document ? this.bind("webkitfullscreenchange", e) : "onmozfullscreenchange" in document && this.bind("mozfullscreenchange", e),
                this
            },
            $.fn.requestFullScreen = function () {
                var e = this[0];
                return e.requestFullScreen ? e.requestFullScreen() : e.mozRequestFullScreen && document.mozFullScreenEnabled ? e.mozRequestFullScreen() : e.webkitRequestFullScreen && e.webkitRequestFullScreen(),
                this
            },
            $.isFullscreen = function () {
                return "fullscreen" in document ? document.fullscreen : "webkitIsFullScreen" in document ? document.webkitIsFullScreen : "mozFullScreen" in document ? document.mozFullScreen : !1
            },
            $.exitFullscreen = function () {
                document.exitFullscreen ? document.exitFullscreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitCancelFullScreen && document.webkitCancelFullScreen()
            };
             
            $(function () {
                var mainStage = $(".main-stage");//要显示全屏的div
                $("a.btn-fullscreen").click(function () { //点击事件
                    if (support.fullscreen) {
                        if ($.isFullscreen()) {
                            $.exitFullscreen();
                            mainStage.css("right", "320px"); 
                        } else {
                            mainStage.requestFullScreen();
                            mainStage.css("right", 0);//控制右边的部分隐藏
                        } 
                    }
                });
                $("#theatre").keyup(function (e) {
                    if (e.which === 27) { 
                        mainStage.css("right", "320px");//恢复原状
                    }
                }); 
    
                if (!support.fullscreen) { $("a.btn-fullscreen").addClass("hidden") }//不支持全屏则隐藏按钮
    
            });
        </script>
  • 相关阅读:
    tomcatserver解析(五)-- Poller
    最新版OpenWrt编译教程,解决依赖问题
    操作系统2015(四川大学软件学院)
    Kafka专业监控系统Kafka Eagle:支持kerberos认证,并且对接星环TDH集群
    logstash导出ElasticSearch数据到CSV及同步两套ES的数据研究
    hive通过like方式查询多个值
    hadoop balancer平衡集群各节点数据
    Inceptor命令04-表
    Inceptor命令02-命令使用
    Inceptor命令01-表介绍
  • 原文地址:https://www.cnblogs.com/xcsn/p/5853552.html
Copyright © 2011-2022 走看看