js实现网页全屏

最新推荐文章于 2024-01-22 13:13:28 发布

m0_56316453

最新推荐文章于 2024-01-22 13:13:28 发布

阅读量1.2k

点赞数

分类专栏： js学习文章标签： javascript js

本文链接：https://blog.csdn.net/m0_56316453/article/details/118341269

版权

这篇博客讲述了如何使用JavaScript实现网页全屏及退出全屏操作。通过监听onresize和onfullscreenchange事件，解决了在按下F11或ESC时无法正确切换全屏按钮显示的问题。

摘要由CSDN通过智能技术生成

老师布置的作业需要完成网页全屏的操作。大概效果是点击按钮全屏，网页全屏并显示“退出全屏”按钮，再点击按钮退出全屏，并显示“全屏”按钮。

部分html代码如下：

        <button id="fullScreenButton" class="left-line" >
            <div class="maptp">
                全屏
            </div>
        </button>
        <button id="exitFullScreenButton" class="left-line"  >
            <div class="maptp">
                退出全屏
            </div>
        </button>

js代码：

$("#fullScreenButton").on("click",function(event){//全屏效果
            event.preventDefault(); 
            event.stopPropagation(); 
            // Trigger fullscreen 
            
            if (document.body.requestFullscreen) { //解决兼容性问题
                document.body.requestFullscreen(); 
                $("#fullScreenButton").css("display","none");//按钮显示