下面小编就为大家带来一篇元素全屏的设置与监听实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
设置全屏和退出全屏
//全屏设置
$('#fullScreen').on('click', function () {
fullScreen();
});
//退出全屏
$('#exitFullScreen').on('click', function () {
exitFullScreen();
});
//进入全屏
function fullScreen() {
var obj = document.getElementById('editMark');
if (obj.requestFullScreen) {
obj.requestFullScreen();
} else if (obj.webkitRequestFullScreen) {
obj.webkitRequestFullScreen();
} else if (obj.msRequestFullScreen) {
obj.msRequestFullScreen();
} else if (obj.mozRequestFullScreen) {
obj.mozRequestFullScreen();
}
}
function exitFullScreen() {
var obj = document.getElementById('editMark');
if (document.exitFullscree) {
document.exitFullscree();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}监听全屏事件
//监听全屏
document.addEventListener('fullscreenchange', function () {
if (document.fullscreenElement) {
alert(1);
} else {
alert(2);
}
}, false);
document.addEventListener('msfullscreenchange', function () {
if (document.msFullscreenElement) {
alert(1);
} else {
alert(2);
}
}, false);
document.addEventListener('mozfullscreenchange', function () {
if (document.mozFullScreen) {
alert(1);
} else {
alert(2);
}
}, false);
document.addEventListener('webkitfullscreenchange', function () {
if (document.webkitIsFullScreen) {
alert(1);
} else {
alert(2);
}
}, false);上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上就是使用元素全屏如何做到设置与监听的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号