当前位置:书生博客 > 心灵随笔 > 有感而发 > 正文

作者:书生

懂得了这世界上没有绝对的正确,能够接受别人有不同的三观和其衍生出来的思考方式。

手机扫码查看

如何使用Jquery实现双击进入网页全屏/退出全屏

偶然在别的博客站发现这么一个特别有趣且实用的功能(增强浏览体验),下面就是全部代码和使用方法,适用于多平台,双击网页空白处就可以进入和退出全屏事件的js,大家可以放在自己的一些站点上。

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
window.isflsgrn = false;//ie11以下是否进入全屏标志,true为全屏状态,false为非全屏状态
window.ieIsfSceen = false;//ie11是否进入全屏标志,true为全屏状态,false为非全屏状态
//跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态
function fullscreenEnable(){
	var isFullscreen = document.fullscreenEnabled ||
	window.fullScreen ||
	document.mozFullscreenEnabled ||
	document.webkitIsFullScreen;
	return isFullscreen;
}
//全屏
var fScreen = function(){
	var docElm = document.documentElement;
	if (docElm.requestFullscreen) {
		docElm.requestFullscreen();
	}
	else if (docElm.msRequestFullscreen) {
		docElm.msRequestFullscreen();
		ieIsfSceen = true;
	}
	else if (docElm.mozRequestFullScreen) {
		docElm.mozRequestFullScreen();
	}
	else if (docElm.webkitRequestFullScreen) {
		docElm.webkitRequestFullScreen();
}else {//对不支持全屏API浏览器的处理,隐藏不需要显示的元素
	window.parent.hideTopBottom();
	isflsgrn = true;
	$("#fsbutton").text("退出全屏");
}
}
//退出全屏
var cfScreen = function(){
	if (document.exitFullscreen) {
		document.exitFullscreen();
	}
	else if (document.msExitFullscreen) {
		document.msExitFullscreen();
	}
	else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	}
	else if (document.webkitCancelFullScreen) {
		document.webkitCancelFullScreen();
	}else {
		window.parent.showTopBottom();
		isflsgrn = false;
		$("#fsbutton").text("全屏");
	}
}
//全屏按钮点击事件
function qp(){
	var isfScreen = fullscreenEnable();
	if(!isfScreen && isflsgrn == false){
		if (ieIsfSceen == true) {
			document.msExitFullscreen();
			ieIsfSceen = false;
			return;
		}
		fScreen();
	}else{
		cfScreen();
	}
}
//键盘操作
$(document).keydown(function (event) {
	if(event.keyCode == 27 && ieIsfSceen == true){
		ieIsfSceen = false;
	}
});

</script>

之后再给body标签加上ondblclick=”qp()”双击执行事件即可使用。

博主有话说:

作者:书生, 转载或复制请以 超链接形式 并注明出处 书生博客
原文地址:《如何使用Jquery实现双击进入网页全屏/退出全屏》 发布于2018-06-16

分享到:
赞(4) 打赏

评论 抢沙发

7 + 1 =


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

如何使用Jquery实现双击进入网页全屏/退出全屏

长按图片转发给朋友

欢迎来访本博客!

本博客分享各种活动线报,实用代码等一些比较实用的资源,感兴趣的话可以收藏一下哦~

了解一下

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录