复制代码代码如下:
(function () {
var fullscreenapi = {
suportesfullscreen: false,
isfullscreen: function () {
retornar falso;
},
solicitaçãofullcreen: function () {},
cancelfullScreen: function () {},
FullScreeneventName: '',
Prefixo: ''
},
BrowSerPrefixes = 'Webkit Moz o MS KHTML'.SPLIT (' ');
// Verifique se há suporte nativo
if (typeof document.cancelfullscreen! = 'indefinido') {
fullcreenapi.supportsfullScreen = true;
} outro {
// Verifique se há suporte à tela cheia pelo prefixo do fornecedor
for (var i = 0, il = BrowSerPrefixes.length; i <il; i ++) {
fullscreenapi.prefix = BrowSerPrefixes [i];
if (tipoof document [fullcreenapi.prefix + 'cancelfullscreen']! = 'indefinido') {
fullcreenapi.supportsfullScreen = true;
quebrar;
}
}
}
// Atualize métodos para fazer algo útil
if (fullscreenapi.supportsfullscreen) {
FullScreenapi.fullScreeneventName = fullscreenapi.prefix + 'fullscrenchange';
fullscreenapi.isfullscreen = function () {
switch (this.prefix) {
caso '':
retornar document.fullscreen;
case 'webkit':
Document.webkitisfullcreen;
padrão:
Documento de retorno [this.Prefix + 'FullScreen'];
}
}
FullScreenapi.RequestFullScreen = function (el) {
return (this.prefix === '')? el.requestfullScreen (): el [this.prefix + 'requestfullScreen'] ();
}
FullScreenapi.cancelfullScreen = function (el) {
return (this.prefix === '')? document.cancelfullScreen (): document [this.prefix + 'cancelfullScreen'] ();
}
}
// plugin jQuery
if (typeof jQuery! = 'indefinido') {
jQuery.fn.requestfullScreen = function () {
Retorne this.Each (function () {
if (fullscreenapi.supportsfullscreen) {
tela cheia.
}
});
};
}
// API de exportação
window.fullScreenApi = fullcreenApi;
}) ();
$ (function () {
$ ("#fullscreenbtn"). Clique (function () {
$ ("#fullcreen"). requestfullScreen ();
});
if (window.top! = self) {
$ ("#TIP"). Texto ("Iframe 里面不能演示该功能！请点击右下角的全屏查看！"). Show ();
}
});
if (!
alerta ("您的破浏览器不支持全屏 API 哦 ， 请换高版本的 Chrome 或者 Firebox！");
}
复制代码代码如下:
<! Doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> javascript 启用全屏 </ititle>
<script id = "jQuery_183" type = "text/javascript" src = jQuery-1.8.3.min.js "> </script>
</head>
<Body>
<botão id = "FullScreenbtn"> 点击我进入全屏模式 </botão>
<div id = "tela cheia">
<H1>
我是全屏区域的内容！
</h1>
<div id = "tip" style = "display: Nenhum;">
</div>
</div>
</body>
</html>
复制代码代码如下:
corpo{
Antecedentes: #FFF;
}
botão{
borda: 1px sólido #ccc;
Cursor: Ponteiro;
exibição: bloco;
margem: automático;
Posição: relativa;
topo: 100px;
}
.fullscreen {
Top de preenchimento: 10%;
Alinhamento de texto: centro;
Antecedentes: nenhum repita rolagem 0 0 #ffffff;
}
/ * Proposta de mozilla (traço) */
.fullScreen: tela cheia {
largura: 100%;
Altura: 100%;
}
/ * Proposta W3C (sem traço) */
.fullScreen: tela cheia {
largura: 100%;
Altura: 100%;
}
/ * Atualmente, prefixos de fornecedores de trabalho */
.fullScreen: -webkit-full-screen, .fullScreen: -moz-full-screen {
largura: 100%;
Altura: 100%;
}
: -Webkit-Full-Screen {
largura: 100%;
Altura: 100%;
}