以下问题:使用我的代码,我通过单击列表中的图像进入全屏模式.我通过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" }); } });
有人可以帮忙吗?
根据您使用的浏览器,您需要绑定适当的前缀.您可以检测事件屏幕更改,如果已更改,则需要轮询它是否当前处于全屏状态.全屏属性始终绑定到文档,因此您可以使用它来检查当前状态并使用它来相应地触发事件.以下代码段绑定到所有主要浏览器,并在所有主流浏览器中检测到.注意:这些事件在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