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

    春有百花秋有月,夏有凉风冬有雪!
  • 相关阅读:
    eclipse 配置SVN代理服务器
    jenkins 配置SVN 代理服务器
    记录服务器启动redis过程
    java牛客刷题2020年9月4日
    java牛客网错题2020年9月3日
    bootstrap-select 实现搜索,如果内容搜索不到显示到框内
    pandas教程5-合并 concat
    pandas教程-4导入导出
    pandas简单教程1
    AttributeError: module 'pandas' has no attribute 'Series'
  • 原文地址:https://www.cnblogs.com/wwwcf1982603555/p/14670706.html
Copyright © 2011-2022 走看看