zoukankan      html  css  js  c++  java
  • 通过jquery监听div双击全屏再次双击恢复demo

    $(".Box").on("dblclick", function(){
                var docId=$(this).attr("id");
                var height=document.getElementById(docId);
                var fullscreenElement =
                    document.fullscreenElement ||
                    document.mozFullScreenElement ||
                    document.webkitFullscreenElement;
                
                console.log(fullscreenElement);
                 if(docId&&fullscreenElement==null){
                    launchIntoFullscreen(height);
                }else{
                    exitFullscreen();
                }
            });
            
            
            
            //全屏显示
            function launchIntoFullscreen(element) {
                if(element.requestFullscreen){
                    element.requestFullscreen();
                }
                else if(element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                }
                else if(element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                }
                else if(element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
            }
            
            //屏幕恢复
            function exitFullscreen() {
                    if(document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if(document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if(document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    }
                }
    $(".Box").on("dblclick", function(){
                var docId=$(this).attr("id");
                var height=document.getElementById(docId);
                var fullscreenElement =
                    document.fullscreenElement ||
                    document.mozFullScreenElement ||
                    document.webkitFullscreenElement;
                
                console.log(fullscreenElement);
                 if(docId&&fullscreenElement==null){
                    launchIntoFullscreen(height);
                }else{
                    exitFullscreen();
                }
            });
            
            
            
            //全屏显示
            function launchIntoFullscreen(element) {
                if(element.requestFullscreen){
                    element.requestFullscreen();
                }
                else if(element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                }
                else if(element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                }
                else if(element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
            }
            
            //屏幕恢复
            function exitFullscreen() {
                    if(document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if(document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if(document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    }
                }

    春有百花秋有月,夏有凉风冬有雪!
  • 相关阅读:
    C# Nest客户端查询es字段为空的语句
    Nuget 包还原成功,但引用异常
    ES7.2 安装问题
    elasticsearch 子节点有Unassigned Shards处理方法 和 failed to obtain in-memory shard lock
    rabbitmq修改日志级别
    C# NEST terms
    ES create index template
    Servicestack + Exceptionless本地部署
    live-server的使用
    处理cnpm控制台运行无反应(干瞪眼 就是不动)
  • 原文地址:https://www.cnblogs.com/wwwcf1982603555/p/14670706.html
Copyright © 2011-2022 走看看