Fullscreen API的简单使用方法

最新推荐文章于 2024-08-16 10:39:59 发布

justforuse

最新推荐文章于 2024-08-16 10:39:59 发布

阅读量2.3k

点赞数

分类专栏： html/css 文章标签： api fullscreen 浏览器

本文链接：https://blog.csdn.net/u014291497/article/details/77874315

版权

html/css 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

参考文章：https://www.sitepoint.com/use-html5-full-screen-api/

这个API的部分功能到今天也没有完全被浏览器实现。更多方法可参考文档。这里实现一个点击图片切换全屏展示的效果（只在Chrome下可用，其他浏览器会有相应的属性名）

<style>
    body{
        margin: 0;
        padding: 0;
    }
    #fullscreen:-webkit-full-screen{
        width: 100%;
        height: 100%;
    }
    img{
        width: 600px;
        vertical-align: bottom;
    }

    /* 全屏状态设置图片宽度 */
    #fullscreen:-webkit-full-screen img{
        width: 100%;
    }

    #fullscreen:-webkit-full-screen:-webkit-backdrop{
        background: maroon;
    }
    #fullscreen:-ms-fullscreen:backdrop{
        background: maroon;
    }
</style>
<body>
    <div id="fullscreen">
        <img id="myImg" src="../beach.jpg" alt="">
    </div>

    <script>
        var $imgContainer = document.getElementById("fullscreen");
        var $img = document.getElementById("myImg");

        // 点击图片切换全屏状态
        $img.addEventListener("click", function(){
            if(document.webkitIsFullScreen){
                document.webkitExitFullscreen();
            }else{
                $imgContainer.webkitRequestFullScreen();
            }
        })

    </script>
</body>