您的位置：首页 > Web前端 > JQuery

如何使用jquery实现全屏问题

2017-11-21 00:00 323 查看

problem:因屏幕或文本域等太小，想扩大屏幕（全屏）

solve:

//先封装好方法

//进行切换
var fullScreenClickCount=0;
//调用各个浏览器提供的全屏方法
var handleFullScreen = function () {
var de = document.documentElement;

if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
} else if (de.msRequestFullscreen) {
de.msRequestFullscreen();
}
else {
wtx.info("当前浏览器不支持全屏！");
}

};
//调用各个浏览器提供的退出全屏方法
var exitFullscreen=function() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}

//获取.fullscreen样式（选择器）的点击事件，再该事件中调用已封装好的方法

$(".fullscreen").click(function () {
if (fullScreenClickCount % 2 == 0) {
handleFullScreen();
} else {
exitFullscreen();
}
fullScreenClickCount++;
});

//这里仅用一个样式实现切换全屏退屏，关键点是判断浏览器实现全屏退屏的方法

完整的例子如下:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>fullscreen test</title>
</head>
<body>
<button class="fullscreen" value="全屏按钮">全屏按钮</button>
</body>
<!-- 导入jquery插件 -->
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//进行切换
var fullScreenClickCount=0;
//调用各个浏览器提供的全屏方法
var handleFullScreen = function () {
var de = document.documentElement;

if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
} else if (de.msRequestFullscreen) {
de.msRequestFullscreen();
}
else {
wtx.info("当前浏览器不支持全屏！");
}

};
//调用各个浏览器提供的退出全屏方法
var exitFullscreen=function() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
$(".fullscreen").click(function () {
if (fullScreenClickCount % 2 == 0) {
handleFullScreen();
} else {
exitFullscreen();
}
fullScreenClickCount++;
});
</script>
</html>

点击之前

点击之后

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery

相关文章推荐

新的分享

章节导航