Fullscreen API的简单使用方法

来源：互联网发布：mac解压缩软件zip 编辑：程序博客网时间：2024/06/08 20:29

参考文章：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>

示例代码地址

一个封装好的方法库：https://github.com/sindresorhus/screenfull.js

阅读全文

0 0