点击按钮,进入全屏与退出全屏切换

复制代码
 1 <script>
 2     // 进入全屏:
 3     function entryFullScreen() {
 4         var docE = document.documentElement;
 5         if (docE.requestFullScreen) {
 6             docE.requestFullScreen();
 7         } else if (docE.mozRequestFullScreen) {
 8             docE.mozRequestFullScreen();
 9         } else if (docE.webkitRequestFullScreen) {
10             docE.webkitRequestFullScreen();
11         }
12     }
13 
14     // 退出全屏
15     function exitFullScreen() {
16         var docE = document;
17         if (docE.exitFullscreen) {
18             docE.exitFullscreen();
19         } else if (docE.mozCancelFullScreen) {
20             docE.mozCancelFullScreen();
21         } else if (docE.webkitCancelFullScreen) {
22             docE.webkitCancelFullScreen();
23         }
24         // 全屏开启
25     form.on('switch(fullscreen)',function(data){
26         var  fValue=data.elem.checked;
27         localStorage.setItem('funnscreen_info',fValue);
28     });
29     $(document).ready(function(){
30         var fScreen=localStorage.getItem('fullscreen_info');
31         if(fScreen&&fScreen!='false'){
32             var fScreenIndex=layer.alert('按ESC退出全屏',{
33                 title:'进入全屏提示信息',
34                 skin:'layui-layer-lan',
35                 closeBtn:0,
36                 anim:4,
37                 offset:'100px'
38             },function(){
39                 entryFullScreen();
40                     $('#FullScreen').html('<i class="larry-icon larry-quanping"></i>退出全屏');
41                     layer.close(fScreenIndex);
42                 }
43             )
44         }
45     })
46         // 全屏切换
47         $('#FullScreen').bind('click', function() {
48             var fullscreenElement =
49                 document.fullscreenElement ||
50                 document.mozFullScreenElement ||
51                 document.webkitFullscreenElement;
52             if (fullscreenElement == null) {
53                 entryFullScreen();
54                 $(this).html('<i class="larry-icon">&#xe604;</i>退出全屏');
55             } else {
56                 exitFullScreen();
57                 $(this).html('<i class="larry-icon">&#xe604;</i>全屏');
58             }
59         })
60 </script>
复制代码

 

posted @   前端极客  阅读(7753)  评论(1编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 字符编码:从基础到乱码解决
点击右上角即可分享
微信分享提示