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();
                    }
                }

    春有百花秋有月,夏有凉风冬有雪!
  • 相关阅读:
    JS加密库
    异常处理
    uva 10673 Play with Floor and Ceil
    执⾏ Python 程序的三种⽅式----pycharm安装
    第⼀个 Python 程序
    认识 Python
    svg的使用
    elementUI中el-image显示不出来图片?img与el-image的区别
    类型转化与变量
    liunx
  • 原文地址:https://www.cnblogs.com/wwwcf1982603555/p/14670706.html
Copyright © 2011-2022 走看看