分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jQuery：如何使用转义按钮退出全屏模式时执行代码？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

以下问题：使用我的代码,我通过单击列表中的图像进入全屏模式.我通过jQuery将我的下一个按钮和我的prev按钮移动到屏幕的边缘.但在离开全屏模式后,我希望他们回到原来的位置.但是如何检测全屏模式是否已被取消？

这是我的代码：
HTML：

<div id="slider-control-left"><span id="slider-prev"></span></div>
<div id="slider">
  <ul class="bxslider">
    <li><img ... /></li>
    ...
    <li><img ... /></li>
  </ul>
</div><!-- end slider-->

JavaScript的：

$(document).ready(function () {
        $('.bxslider li img').click(function (event) {
            var clicked = $(this);
            var clicked_index = clicked.index() + 1;
            if (clicked[0].mozrequestFullScreen) { //works only for firefox so far
                clicked[0].mozrequestFullScreen();
                $('#slider-next').css({
                    "position": "fixed","right": "0","top": "50%","z-index": "2147483647"
                });
                $('#slider-next').click(function (event) {
                    clicked_index = clicked_index + 1;
                    var clacked = $('.bxslider li img').eq(clicked_indeX);
                    document.mozCancelFullScreen();
                    clacked[0].mozrequestFullScreen();
                });
           });

        });

正如您在单击下一个按钮时所看到的,全屏模式将在“幻灯片”显示期间取消.但是我只需要通过@L_@R_489_11289@_7@按钮@L_@R_489_11289@_7@全屏时执行我的代码.

我已经做了一些研究,并试图弄清楚如何检测@L_@R_489_11289@_7@全屏,我试图在我的代码中嵌入一些代码片段,但我没能让它工作.

这个片段根本不是很有用：if(window.innerHeight == screen.height){…}

检测转义按钮按键有效,但我无法嵌入我的代码,以便它的工作原理：

$(document).keyup(function (E) {
            if (e.keyCode == 27) {
                $('#slider-next').css({
                    "position": "absolute","right": "auto","top": "194px","z-index": "auto"
                });
            }
        });

有人可以帮忙吗？

解决方法

根据您使用的浏览器,您需要绑定适当的前缀.您可以检测事件屏幕更改,如果已更改,则需要轮询它是否当前处于全屏状态.全屏属性始终绑定到文档,因此您可以使用它来检查当前状态并使用它来相应地触发事件.以下代码段绑定到所有主要浏览器,并在所有主流浏览器中检测到.注意：这些事件在ios中不可用

$(el).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange',function(E) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

    // Now do something interesTing
    alert('Event: ' + event);    
});

进一步阅读这篇http://davidwalsh.name/fullscreen