Browse Source

:sparkles:添加新方法

striveDJiang 8 years ago
parent
commit
55eab510d6
2 changed files with 46 additions and 0 deletions
  1. 1 0
      README.md
  2. 45 0
      bom/fullScreen.js

+ 1 - 0
README.md

@@ -51,6 +51,7 @@ JavaScript-utils
 * [scrollTo - 在${duration}时间内,滚动条平滑滚动到${to}指定位置](https://github.com/striveDJiang/JavaScript-utils/blob/master/bom/scrollTo.js)
 * [offset - 获取一个元素的距离文档(document)的位置,类似jQ中的offset()](https://github.com/striveDJiang/JavaScript-utils/blob/master/bom/offset.js)
 * [isSupportWebP - 判断浏览器是否支持webP格式图片](https://github.com/striveDJiang/JavaScript-utils/blob/master/bom/isSupportWebP.js)
+* [fullScreen - 全屏显示与取消全屏](https://github.com/striveDJiang/JavaScript-utils/blob/master/bom/fullScreen.js)
 
 ## regexp
 * [isEmail - 判断是否为邮箱地址](https://github.com/striveDJiang/JavaScript-utils/blob/master/regexp/isEmail.js)

+ 45 - 0
bom/fullScreen.js

@@ -0,0 +1,45 @@
+/**
+ * 
+ * @desc 全屏显示与取消全屏
+ * @html <a id="toggleFullScreen" href="javascript:;" onclick="toggleFullScreen()">全屏显示</a>
+ */
+function toggleFullScreen() {
+    if (!document.fullscreenElement &&
+        !document.mozFullScreenElement && !document.webkitFullscreenElement) {
+        if (document.documentElement.requestFullscreen) {
+            document.documentElement.requestFullscreen();
+            document.getElementById("toggleFullScreen").innerText = "退出全屏";
+        } else if (document.documentElement.mozRequestFullScreen) {
+            document.documentElement.mozRequestFullScreen();
+            document.getElementById("toggleFullScreen").innerText = "退出全屏";
+        } else if (document.documentElement.webkitRequestFullscreen) {
+            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+            document.getElementById("toggleFullScreen").innerText = "退出全屏";
+        }
+    } else {
+        if (document.cancelFullScreen) {
+            document.cancelFullScreen();
+            document.getElementById("toggleFullScreen").innerText = "全屏显示";
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+            document.getElementById("toggleFullScreen").innerText = "全屏显示";
+        } else if (document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen();
+            document.getElementById("toggleFullScreen").innerText = "全屏显示";
+        }
+    }
+};
+// 监听Esc按键退出全屏事件
+window.onresize = function () {
+    var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
+    if (isFull === undefined) {
+        isFull = false;
+    }
+    if (!isFull) {
+        if (document.cancelFullScreen || document.mozCancelFullScreen || document.webkitCancelFullScreen) {
+            document.getElementById("toggleFullScreen").innerText = "全屏显示";
+        }
+    }
+};
+
+module.exports = toggleFullScreen;