HTML5引入了一些新的元素和一些神奇的API。本教程要学习的是其中的全屏模式FullScreen API。
为什么称它为全屏模式Full-Screen API？
在这个API出现之前，我们只能简单的使用F11键使浏览器进入全屏模式。我们不能够选择我们想要的页面元素进入全屏模式，通过Full-Screen API我们能够打破这种限制。
使用Full-Screen API能使一个页面中指定的元素进入全屏模式。它对视频、图片、游戏或基于HTML/CSS的幻灯片、轮询图特别有用。当用户静茹全屏模式，就会有一条提示信息告知他们使用ESC键可以随时退出全屏模式。
全屏模式的属性和事件：
Full-Screen API公开了文档对象的两个属性：
fullScreenEnabled
fullScreenElement
如果当前全屏模式可用，这些指定的对象将被转换为全屏模式。
document.fullscreenEnabled
如果当前文档允许全屏模式，这个属性值返回true。它也被用来检测浏览器是否支持全屏模式。
if (document.fullscreenEnabled) {
// further code goes here
}
注意：在以前的版本中，在˜Screen中有一个波浪线˜S，现在在Firefox它任然起作用。下面是夸浏览器的写法：
if (document.mozFullScreenEnabled || document.fullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled ) {
// further code goes here
}
document.fullscreenElement
这个属性将返回当前进入全屏模式的元素，或返回null(未进入全屏模式)。
if (document.fullscreenElement) {
// further code goes here
}
注意：在fullscreenElement中screen是小写。下面是夸浏览器的写法：
if (document.webkitFullscreenElement || document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
// Further code goes here
}
Full-Screen API公开了两个方法来控制指定元素进入全屏或退出全屏模式。
requestFullscreen()
exitFullscreen()
element.requestFullscreen()
这个方法实现一个指定元素进入全屏模式。例如：
document.getElementById("element id goes here").requestFullscreen();
注意：screen是小写。下面是夸浏览器的写法：
var ele = document.getElementById("element id goes here");
// going full-screen
if (ele.requestFullscreen) {
ele.requestFullscreen();
}
else if (ele.webkitRequestFullscreen) {
ele.webkitRequestFullscreen();
}
else if (ele.msRequestFullscreen) {
ele.msRequestFullscreen();
}
else if (ele.mozRequestFullScreen) {
ele.mozRequestFullScreen();
}
document.exitFullscreen
这个方法用来取消全屏模式。
document.exitFullscreen;
注意：以前版本这个方法的名字是cancelFullScreen，现在Firefox仍在使用它。下面是夸浏览器的写法：
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
全屏模式CSS(Full-Screen CSS)
:fullscreen {
/* properties */
}
注意：以前版本使用的名字是:full-screen，现在Firefox和webkit内核浏览器仍在使用它。下面是夸浏览器的写法：
:fullscreen {
/* properties */
}
:-webkit-full-screen {
/* properties */
}
:-ms-fullscreen {
/* properties */
}
:-moz-full-screen {
/* properties */
}
::backdrop {
/* properties */
}
::-ms-backdrop {
/* properties */
}
演示
这里的demo使用了html5全屏模式FullScreen API使一个元素进入全屏模式。查看：全屏模式demo
HTML
HTML5 FullScreen API Demo
Click the letter 'F' on top right corner to toggle full-screen view.
CSS
.mainwrapper {
width: 38%;
margin: 0 auto;
}
.mainwrapper h2 {
text-align:center;
}
.mainwrapper p{
font-size:12px;
color:black;
text-align:center;
font-family:sans-serif;
padding-top:15px;
}
.fullscreen {
position: relative;
}
.fullscreen img {
max-width: 100%;
border: 8px solid #69A5F1;
box-shadow: 5px 5px 45px #69A5F1;
}
.fullscreen .full-button {
display: inline-block;
z-index: 105;
height: 32px;
width: 32px;
position: absolute;
top: 10px;
right: 15px;
cursor: pointer;
}
.fullscreen .full-button:after {
display: inline-block;
width: 100%;
height: 100%;
font-size: 34px;
cursor: pointer;
color: #fff;
content: "F";
}
JAVASCRIPT
$(document).ready(function(){
$('.full-button').on('click', function(){
var docelem = document.getElementById('screen');
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}else if (docelem.webkitRequestFullscreen) {
docelem.webkitRequestFullscreen();
} else if(docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
} else if(docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
});
});
浏览器支持
如果你想查看有哪些浏览器支持这个API，建议你到这个网站看看：http://caniuse.com/#feat=fullscreen。所有的现代浏览器都支持FullScreen API，下面列出了一些支持FullScreen API的浏览器：
Internet Explorer 11+
Firefox 10+
Chrome 15+
Safari 5.1+
Opera 12.10+
注意事项
html5全屏模式Full Screen不应该在任何网站上都使用，应该在需要的地方使用它。
全屏显示应限制在某些情况下使用。这将使用户专注于做某件事情，而不会被其它元素干扰。例如：
看视频
游戏
幻灯片
如果你提供这些功能，就要确保你提供的内容具有很高的分辨率(在图像的情况下)否则模糊图像会导致用户体验下降。
本教程就到这里，希望对你有所帮助。
3789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
