zoukankan      html  css  js  c++  java
  • 点击按钮,进入全屏与退出全屏切换

     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>
  • 相关阅读:
    ORACLE学习-1.过滤和排序
    Java-net.sf.json.JSONException: java.lang.reflect.InvocationTargetException处理方法之一
    ORACLE
    java日常-com.alibaba.fastjson快速处理json字符串转成list类型
    java日常-List、Map初始值
    javaScript中获取时间
    获取select的option值及其文本
    java日常-通过年月,获取到月的第一天和最后一天
    sybase powerdesigner 16.5注册码
    05-Docker私有仓库
  • 原文地址:https://www.cnblogs.com/yangguoe/p/8949314.html
Copyright © 2011-2022 走看看