HTML頁面全屏/退出全屏

時間 2019-12-07

標籤 html 頁面全屏退出欄目 HTML 简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>頁面全屏/退出全屏</title>
 7 </head>
 8 
 9 <body>
10     <a class="screen-full" id="full" href="javascript:;">全屏</a>
11 </body>
12 
13 </html>
14 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
15 <script>
16 $('#full').click(function() { 17     var ele = document.documentElement; 18     var SCREEN_FULL_TEXT = "全屏"; 19     var SCREEN_REST_TEXT = "退出全屏"; 20     var SCREEN_FULL = 'screen-full'; 21     var SCREEN_REST = 'screen-restore'; 22     var iconElem = $(this); 23     if (iconElem.hasClass(SCREEN_FULL)) { 24         var reqFullScreen = ele.requestFullScreen || ele.webkitRequestFullScreen || ele.mozRequestFullScreen || ele.msRequestFullscreen; 25         if (typeof reqFullScreen !== 'undefined' && reqFullScreen) { 26  reqFullScreen.call(ele); 27  }; 28  iconElem.addClass(SCREEN_REST).removeClass(SCREEN_FULL); 29  iconElem.text(SCREEN_REST_TEXT); 30  } else { 31         if (document.exitFullscreen) { 32  document.exitFullscreen(); 33  } else if (document.mozCancelFullScreen) { 34  document.mozCancelFullScreen(); 35  } else if (document.webkitCancelFullScreen) { 36  document.webkitCancelFullScreen(); 37  } else if (document.msExitFullscreen) { 38  document.msExitFullscreen(); 39  } 40  iconElem.addClass(SCREEN_FULL).removeClass(SCREEN_REST); 41  iconElem.text(SCREEN_FULL_TEXT); 42  } 43 }); 44 </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。