首页 > 代码库 > Fullscreen API 全屏显示网页
Fullscreen API 全屏显示网页
可参考文档:http://blog.csdn.net/tywali/article/details/8623938
脚本代码
<script type="text/javascript"> var support = { fullscreen: "fullscreen" in document || "webkitIsFullScreen" in document || "mozFullScreen" in document }; $.fn.fullscreen = function (e) { return "onfullscreenchange" in document ? this.bind("fullscreenchange", e) : "onwebkitfullscreenchange" in document ? this.bind("webkitfullscreenchange", e) : "onmozfullscreenchange" in document && this.bind("mozfullscreenchange", e), this }, $.fn.requestFullScreen = function () { var e = this[0]; return e.requestFullScreen ? e.requestFullScreen() : e.mozRequestFullScreen && document.mozFullScreenEnabled ? e.mozRequestFullScreen() : e.webkitRequestFullScreen && e.webkitRequestFullScreen(), this }, $.isFullscreen = function () { return "fullscreen" in document ? document.fullscreen : "webkitIsFullScreen" in document ? document.webkitIsFullScreen : "mozFullScreen" in document ? document.mozFullScreen : !1 }, $.exitFullscreen = function () { document.exitFullscreen ? document.exitFullscreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitCancelFullScreen && document.webkitCancelFullScreen() }; $(function () { var mainStage = $(".main-stage");//要显示全屏的div $("a.btn-fullscreen").click(function () { //点击事件 if (support.fullscreen) { if ($.isFullscreen()) { $.exitFullscreen(); mainStage.css("right", "320px"); } else { mainStage.requestFullScreen(); mainStage.css("right", 0);//控制右边的部分隐藏 } } }); $("#theatre").keyup(function (e) { if (e.which === 27) { mainStage.css("right", "320px");//恢复原状 } }); if (!support.fullscreen) { $("a.btn-fullscreen").addClass("hidden") }//不支持全屏则隐藏按钮 }); </script>
Fullscreen API 全屏显示网页
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。