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

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

这是我的代码：HTML：

 
 
 
 ... 
 
 
 

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