复制代码代码如下:
(وظيفة () {
var fullscreenapi = {
SupportSfullScreen: خطأ ،
isfullscreen: function () {
العودة كاذبة
} ،
requestfullscreen: function () {} ،
CancelFullScreen: Function () {} ،
fullscreeneventname: '' ،
بادئة : ''
} ،
BrowserPrefixes = 'Webkit moz o ms khtml'.split (' ') ؛
// تحقق من الدعم الأصلي
if (typeof document.cancelfullscreen! = 'undefined') {
fullscreenapi.SupportSfullScreen = true ؛
} آخر {
// تحقق من دعم ملء الشاشة بواسطة بادئة البائع
لـ (var i = 0 ، il = browserprefixes.length ؛ i <il ؛ i ++) {
fullscreenapi.prefix = browserprefixes [i] ؛
if (typeof document [fullscreenapi.prefix + 'ClushfullScreen']! = 'undefined') {
fullscreenapi.SupportSfullScreen = true ؛
استراحة؛
}
}
}
// تحديث طرق القيام بشيء مفيد
if (fullscreenapi.supportsfullscreen) {
fullscreenapi.fullScreeneventName = fullscreenapi.prefix + 'fullscreenchange' ؛
FullScreenapi.isfullScreen = function () {
التبديل (this.prefix) {
قضية '':
return document.fullScreen ؛
حالة "webkit":
Return document.webkitisfullscreen ؛
تقصير:
مستند الإرجاع [this.prefix + 'fullscreen'] ؛
}
}
fullscreenapi.requestfullscreen = function (el) {
العودة (this.prefix === '')؟ el.requestfullScreen (): el [this.prefix + 'requestFullScreen'] () ؛
}
fullscreenapi.cancelfullscreen = function (el) {
العودة (this.prefix === '')؟ document.cancelfullscreen (): document [this.prefix + 'clastefullscreen'] () ؛
}
}
// jQuery Plugin
if (typeof jQuery! = 'undefined') {
jquery.fn.requestfullScreen = function () {
إرجاع this.each (function () {
if (fullscreenapi.supportsfullscreen) {
fullscreenapi.requestfullscreen (هذا) ؛
}
}) ؛
} ؛
}
// تصدير API
window.fullScreenApi = fullscreenapi ؛
}) () ؛
$ (function () {
$ ("#fullscreenbtn"). انقر فوق (function () {
$ ("#fullscreen"). requestFullScreen () ؛
}) ؛
if (window.top! = self) {
$ ("#tip"). النص ("iframe 里面不能演示该功能！请点击右下角的全屏查看！"). show () ؛
}
}) ؛
if (! fullscreenapi.supportsfullscreen) {
تنبيه ("您的破浏览器不支持全屏 api 哦 ， 请换高版本的 chrome 或者 firebox！") ؛
}
复制代码代码如下:
<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8">
<title> javaScript 启用全屏 </title>
<script id = "jquery_183" type = "text/javaScript" src = jQuery-1.8.3.min.js "> </script>
</head>
<body>
<button id = "fullscreenbtn"> 点击我进入全屏模式 </butting>
<div id = "fullscreen">
<H1>
我是全屏区域的内容！
</h1>
<div id = "tip" style = "display: none ؛">
</div>
</div>
</body>
</html>
复制代码代码如下:
جسم{
الخلفية: #fff ؛
}
زر{
الحدود: 1px الصلبة #CCC ؛
المؤشر: مؤشر.
العرض: كتلة ؛
الهامش: السيارات ؛
الموقف: قريب
أعلى: 100px ؛
}
.fullScreen {
الحشو أعلى: 10 ٪ ؛
محاذاة النص: المركز ؛
الخلفية: لا شيء تكرار التمرير 0 0 #ffffff ؛
}
/ * اقتراح موزيلا (اندفاعة) */
.fullscreen: شاشة كاملة {
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
}
/ * W3C اقتراح (بدون اندفاعة) */
.fullscreen: ملء الشاشة {
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
}
/ * حاليًا بادئات البائعين */
.fullscreen: -webkit-full-screen ، .fullscreen: -moz-full-screen {
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
}
: -webkit-full-screen {
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
}