04-新手入门级别：原生js打造全屏和退出全屏的效果

最新推荐文章于 2024-07-14 12:56:18 发布

不及你笑靥如花

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量115

点赞数 1

分类专栏： js特效

本文链接：https://blog.csdn.net/qq_43775721/article/details/115689975

版权

javascript 前端 html5 css3

js特效专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏展示和退出全屏</title>
</head>

<body>
    <div id="content" style="position: relative; margin:0 auto;height:500px;width:700px; background:#ccc;">
        <button id="btn" style="position: absolute; bottom: 30px; left: 10px;">全屏</button>
        <h1>全屏展示和退出全屏的功能</h1>
        <button id="btnn" style="position: absolute; bottom: 30px; right: 10px;">退出</button>
    </div>
    <script>
        document.getElementById("btn").onclick = function() {
            var elem = document.getElementById("content");
            requestFullScreen(elem);
        };

        document.getElementById("btnn").onclick = function() {
            exitFullscreen();
        };
        /*
         全屏显示
         */
        function requestFullScreen(element) {
            var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
            requestMethod.call(element);
        };
        /*
         全屏退出
         */
        function exitFullscreen() {
            var elem = document;
            var elemd = document.getElementById("content");
            if (elem.webkitCancelFullScreen) {
                elem.webkitCancelFullScreen();
            } else if (elem.mozCancelFullScreen) {
                elemd.mozCancelFullScreen();
            } else if (elem.cancelFullScreen) {
                elem.cancelFullScreen();
            } else if (elem.exitFullscreen) {
                elem.exitFullscreen();
            } else {
                //浏览器不支持全屏API或已被禁用
            };

            /*
             退出全屏后样式还原
             */
            elemd.style.height = '500px';
            elemd.style.width = '700px'

        }
    </script>
</body>

</html>

不及你笑靥如花

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
04-新手入门级别：原生js打造全屏和退出全屏的效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全.
复制链接

扫一扫