div全屏

最新推荐文章于 2024-04-20 18:01:19 发布

_let

最新推荐文章于 2024-04-20 18:01:19 发布

阅读量430

点赞数

分类专栏： javaScript

javaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

文章转自：http://www.cnblogs.com/y-z-q/p/5674562.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title></title>
        <style type="text/css">
            .div1{
                width: 1000px;height: 500px;
                border: solid 1px blue;
            }
            .test{        
                width:100%;        
                background: black;
                height:100%;
                min-height: 400px;
                border: solid 1px red;                
            }
            div{
                color: #fff;
            }
        </style>

    </head>
    <body>
        <!-- 如果你想兼容一些低版本的ie浏览器，你可以替换我做提示的区域

        alert("当前浏览器不支持全屏化操作！");
        让你想全屏的部分，width:100%;height:100%;
        然后再让他的父类节点的高度和宽度等于当前可用浏览器的最大宽度和高度就行啦。
        在这里没有做具体的实现。
        本人，不是很建议去兼容低ie浏览器，因为做前端的都知道，现在大部分html5和css3,ES6都不在积极的淘汰
        低版本浏览器。微软也放弃了对低版本ie浏览器的维护。-->
        <div class="div1" >
            <div id="div2"  class="test">
                <div id="div" class="" style="border:solid 1px #ffffff;width:100px;height:40px;">全屏</div>
                <div id="div3" class="" style="border:solid 1px #ffffff;width:100px;height:40px;">取消全屏</div>
            </div>
        </div>


        <script>
            (function () {
                var viewFullScreen = document.getElementById("div");    
                if (viewFullScreen) {
                    viewFullScreen.addEventListener("click", function () {
                        var docElm = document.getElementById("div2");
                        if (docElm.requestFullscreen) {
                            docElm.requestFullscreen();
                        }
                        else if (docElm.msRequestFullscreen) {
                            docElm.msRequestFullscreen();
                        }
                        else if (docElm.mozRequestFullScreen) {
                            docElm.mozRequestFullScreen();
                        }
                        else if (docElm.webkitRequestFullScreen) {
                            docElm.webkitRequestFullScreen();
                        }else{
                            alert("当前浏览器不支持全屏化操作！");
                        }
                    }, false);
                }

                var cancelFullScreen = document.getElementById("div3");
                if (cancelFullScreen) {
                    cancelFullScreen.addEventListener("click", function () {
                        if (document.exitFullscreen) {
                            document.exitFullscreen();
                        }
                        else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                        }
                        else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                        }
                        else if (document.webkitCancelFullScreen) {
                            document.webkitCancelFullScreen();
                        } else{
                            alert("当前浏览器不支持全屏化操作！");
                        }
                    }, false);
                }                        
            })();




        </script>
    </body>
</html>

_let

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div全屏

文章转自：http://www.cnblogs.com/y-z-q/p/5674562.html&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt
复制链接

扫一扫

专栏目录