jquery实现全屏
公冶嘉茂
主要用到两个方法
调用各个浏览器提供的全屏方法
function handleFullScreen() {
var de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.msRequestFullscreen) {
de.msRequestFullscreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else {
wtx.info("当前浏览器不支持全屏！");
}
}
其中：msRequestFullscreen ie浏览器的全屏方法。
调用各个浏览器提供的退出全屏方法
function exitFullscreen() {
var de = document;
if(de.exitFullscreen) {
de.exitFullscreen();
} else if(de.msExitFullscreen) {
de.msExitFullscreen();
} else if(de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if(de.webkitExitFullscreen) {
de.webkitExitFullscreen();
}
}
其中：msExitFullscreen退出全屏ie浏览器的方法。
接下来就是调用两个封装好的方法实现全屏。
1、首先在body内放置一个点击事件，按钮；此处简写。
<body>
<input class="enterClass" type="button" value="切换全屏" />
<input class="returnClass" type="button" value="退出全屏" />
</body>
2、获取.enterClass样式的点击事件,实现全屏
$(".enterClass").click(function () {
handleFullScreen(); //全屏
$('.enterClass').css('display','none');
$('.returnClass').css('display','block');
});
3、获取.returnClass样式的点击事件，退出全屏
$(".returnClass").click(function () {
exitFullscreen(); //退出全屏
$('.enterClass').css('display','block');
$('.returnClass').css('display','none');
});
其中enterClass 和 returnClass是此处按钮的样式以及位置的放置，如果想要给这个按钮加移入移除颜色的改变样式可以使用 id选择器的方式进行改变。
类似资料：