h5新知识_2全屏操作

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8    <div id="box" style="text-align: center;">
 9        <img src="img/mac.png" alt="">
10        <div style="text-align: center">
11            <button id="full">全屏</button>
12            <button id="cancel_full">取消全屏</button>
13            <button id="is_full">判断是否是全屏</button>
14        </div>
15    </div>
16 <script src="js/jquery-3.3.1.js"></script>
17 <script type="text/html">
18     $(function () {
19         // 1. 获取全屏对象
20         let box = document.getElementById('box');
21         //  2. 全屏
22         $('#full').on('click', ()=>{
23             box.requestFullscreen();
24         });
25     });
26 </script>
27 <script>
28     $(function () {
29         // 1. 获取全屏对象
30         let box = document.getElementById('box');
31         //  2. 全屏
32         $('#full').on('click', ()=>{
33             fullScreen(box);
34         });
35         // 3. 取消全屏
36         $('#cancel_full').on('click', ()=>{
37             exitFullscreen();
38         });
39         // 4. 判断是否是全屏
40         $('#is_full').on('click', ()=>{
41            // console.log(document.webkitIsFullScreen);
42            //  console.log(document.mozIsFullScreen);
43            //  console.log(document.isFullScreen);
44             console.log(isFullScreen());
45 
46         });
47     });
48 
49     //全屏
50     let fullScreen = (element) =>{
51         if (element.requestFullscreen) {
52             element.requestFullscreen();
53         } else if (element.msRequestFullscreen) {
54             element.msRequestFullscreen();
55         } else if (element.mozRequestFullScreen) {
56             element.mozRequestFullScreen();
57         } else if (element.webkitRequestFullscreen) {
58             element.webkitRequestFullscreen();
59         }
60     };
61 
62     //退出全屏
63     let exitFullscreen = () =>{
64         if (document.exitFullscreen) {
65             document.exitFullscreen();
66         } else if (document.msExitFullscreen) {
67             document.msExitFullscreen();
68         } else if (document.mozCancelFullScreen) {
69             document.mozCancelFullScreen();
70         } else if (document.webkitExitFullscreen) {
71             document.webkitExitFullscreen();
72         }
73     };
74 
75     let isFullScreen = () =>{
76         return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
77     }
78 
79 </script>
80 </body>
81 </html>
h5新知识_2全屏操作

猜你喜欢
