jQuery:使用退出按钮退出全屏模式时如何执行代码? [英] jQuery: How to execute code when exiting fullscreen mode with escape button?

问题描述

以下问题:使用我的代码，我通过单击列表中的图像进入全屏模式.我通过jQuery将下一个按钮和上一个按钮移动到了屏幕边缘.但是，在退出全屏模式后，我希望它们恢复到原来的位置.但是，如何检测全屏模式是否已取消?

Following problem: With my code I enter fullscreen mode by clicking on an image in a list. I moved my next-button and my prev-button to the edge of the screen via jQuery. But after leaving fullscreen mode I want them back in their original position. But how can I detect if the fullscreen mode has been cancelled?

这是我的代码: HTML:

Here is my code: 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:

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();
                });
           });

        });

您可以通过单击下一个按钮看到，在幻灯片"显示期间，全屏模式将被取消.但是我只需要在通过转义按钮退出全屏模式时执行我的代码即可.

As you can see by clicking on the next button fullscreen mode will be cancelled during the "slide"-show. But I only need my code executed when exiting fullscreen via escape button.

我已经进行了一些研究，试图弄清楚如何检测退出全屏状态，并试图在代码中嵌入一些代码片段，但是我无法使其正常工作.

I already did some research and tried to figure out how to detect exiting the fullscreen and i tried to embed some code snippets in my code but i failed to get it to work.

此代码片段根本没有帮助:if (window.innerHeight == screen.height) {...}

This snippet wasn't very helpful at all: if (window.innerHeight == screen.height) {...}

检测逃逸按钮的按键效果可以，但是我无法嵌入我的代码中，因此它可以正常工作:

Detecting escape button keypress works but I wasnt able to embed in my code so that it works:

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

有人可以帮忙吗?

推荐答案

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

Depending on which browser you are using you will need to bind the appropriate prefix. You can detect the event screenchange and if it has changed you need to poll whether it is currently in fullscreen or not. The fullscreen property is always bound to the document so that is what you can use to check the current state and use it to fire the events accordingly. The following snippet binds to all major browser and detects in all major browsers. Note: these events are not available in 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

这篇关于jQuery:使用退出按钮退出全屏模式时如何执行代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！