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

    春有百花秋有月,夏有凉风冬有雪!
  • 相关阅读:
    LeetCode题解(14)--Longest Common Prefix
    LeetCode题解(12)--Integer to Roman
    LeetCode题解(13)--Roman to Integer
    LeetCode题解(9)--Palindrome Number
    LeetCode题解(8)--String to Integer (atoi)
    LeetCode题解(7)--Reverse Integer
    LeetCode题解(6)--ZigZag Conversion
    从并发和索引说说innodb和myisam的区别
    thrift基本概念和实例
    fastcgi+lighttpd+c语言 实现搜索输入提示
  • 原文地址:https://www.cnblogs.com/wwwcf1982603555/p/14670706.html
Copyright © 2011-2022 走看看