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>
HTML页面全屏/退出全屏
免责声明！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。