jQuery:如何使用转义按钮退出全屏模式时执行代码？

Question

以下问题:使用我的代码,我通过单击列表中的图像进入全屏模式.我通过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();
                });
           });

        });

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

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

这个片段根本不是很有帮助: 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"
                });
            }
        });

有人可以帮忙吗？

Answer 1

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