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>
  • 相关阅读:
    优雅得使用composer来安装各种PHP小工具
    Docker学习总结之Docker与Vagrant之间的特点比较
    深入理解php 匿名函数和 Closure
    laravel 拾遗 中间件
    centos 手动编译 fcitx 各种问题大全
    Install haroopad on centos7
    centos7 編譯 chmsee
    centos 7 禁用笔记本触摸板设置
    理解 Linux 配置文件
    输入法环境变量XMODIFIERS/GTK_IM_MODULE
  • 原文地址:https://www.cnblogs.com/yangguoe/p/8949314.html
Copyright © 2011-2022 走看看