关于js如何实现特定div全屏显示、窗口全屏、图片全屏显示
如果对您有帮助,可以收藏一下,以备后续使用,节约资料查找时间
//全屏使用示例
// 窗口全屏
$('.win-fullscreen').on('click', function () {
requestFullScreen(document.documentElement);
});
// div全屏
$('.Full_screen').on('click', function () {
var address = $(this).attr("data-addrss");
requestFullScreen($('.see_infor')[0], address);
});
// 图片全屏
$('.img-fullscreen').on('click', function () {
requestFullScreen($('.img')[0]);
});
// 退出全屏
$(document).on('click', '.exit-fullscreen', function () {
exitFull();
});
// 窗口状态改变事件 .tea-show 操作按钮
fullscreenchange(document, function (isFull, address) {
console.log(isFull, address);
});
/* 封装 */
// 窗口状态改变
function fullscreenchange(el, callback) {
el.addEventListener("fullscreenchange", function () {
callback && callback(document.fullscreen);
});
el.addEventListener("webkitfullscreenchange", function () {
callback && callback(document.webkitIsFullScreen);
});
el.addEventListener("mozfullscreenchange", function () {
callback && callback(document.mozFullScreen);
});
el.addEventListener("msfullscreenchange", function () {
callback && callback(document.msFullscreenElement);
});
}
// 全屏
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen || //W3C
element.webkitRequestFullScreen || //Chrome等
element.mozRequestFullScreen || //FireFox
element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
//退出全屏
function exitFull() {
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //Chrome等
document.webkitExitFullscreen || //FireFox
document.webkitExitFullscreen; //IE11
if (exitMethod) {
exitMethod.call(document);
} else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
请先 后发表评论~