js全屏

原创 2015年07月07日 14:06:08
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>微信墙</title>
    <link rel="stylesheet" type="text/css" href="css.css">
    <script type="text/javascript" src="images/jq.min.1.11.1.js"></script>
    <script type="text/javascript">

    (function(){
        var fullScreenApi = {
                supportsFullScreen: false,
                isFullScreen: function() { return false; },
                requestFullScreen: function() {},
                cancelFullScreen: function() {},
                fullScreenEventName: '',
                prefix: ''
            },
        browserPrefixes = 'webkit moz o ms khtml'.split(' ');
        // check for native support
        if (typeof document.cancelFullScreen != 'undefined') {
            fullScreenApi.supportsFullScreen = true;
        } else {
            // check for fullscreen support by vendor prefix
            for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
                fullScreenApi.prefix = browserPrefixes[i];
                if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
                    fullScreenApi.supportsFullScreen = true;
                    break;
                }
            }
        }
        // update methods to do something useful
        if (fullScreenApi.supportsFullScreen) {
            fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
            fullScreenApi.isFullScreen = function() {
                switch (this.prefix) {
                    case '':
                        return document.fullScreen;
                    case 'webkit':
                        return document.webkitIsFullScreen;
                    default:
                        return document[this.prefix + 'FullScreen'];
                }
            }
            fullScreenApi.requestFullScreen = function(el) {
                return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
            }
            fullScreenApi.cancelFullScreen = function(el) {
                return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
            }
        }
        // jQuery plugin
        if (typeof jQuery != 'undefined') {
            jQuery.fn.requestFullScreen = function() {
                return this.each(function() {
                    if (fullScreenApi.supportsFullScreen) {
                        fullScreenApi.requestFullScreen(this);
                    }
                });
            };
        }
        window.fullScreenApi = fullScreenApi;
    })();
    </script>
  </head>
  <body class="wx-wall" id="fullscreenbox">

  <div class="wx-wall-main" >
    
    </div>
    
    <div class="wx-wall-footer">
      <div class="footer-content">
        <div class="footer-notice">
          <div class="notice">
            <marquee></marquee>
          </div>
        </div>
        <div class="footer-menu">
          <ul>
            <li><a class="quanpin" title="全屏"  href="javascript:void(0)" id="fullscreenbtn"></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  </body>
<script type="text/javascript">



$(function(){
    $('#fullscreenbtn').click(function(){
        if(window.fullScreenApi.supportsFullScreen){
            window.fullScreenApi.requestFullScreen(document.getElementById('fullscreenbox'));
        }else{
            alert('就你这浏览器,基本就告别全屏功能了');
        }
    });
});
</script>
</html>

用html5 js实现浏览器全屏

项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo...
  • qq798833488
  • qq798833488
  • 2016年12月26日 01:57
  • 1654

JS实现新打开网页最大化or全屏显示

一个新的小功能,用户希望打开的页面可以全屏显示~唔~不是实现F11那种效果,只是填满任务栏上方的屏幕~ function openwintask(url) { ...
  • itchiang
  • itchiang
  • 2015年05月21日 09:24
  • 7743

js实现窗口全屏示例

前言 该 demo 包含全屏事件、退出全屏事件以及屏幕状态改变的钩子函数的封装 以下是一个完整示例,只需整体拷贝下来运行即可(注意引入了 jquery) 示例 demo ...
  • u011500781
  • u011500781
  • 2016年10月23日 00:32
  • 759

js代码让iframe窗口全屏

最近在工作中使用novnc远程连接电脑,在ifrmae中嵌入novnc页面,点击全屏按钮,能够让iframe页面全屏。 我的思路是: 1)点击全屏按钮,让当前页面全屏; 2)将iframe重新fixe...
  • qq_30337695
  • qq_30337695
  • 2016年07月06日 13:28
  • 7560

HTML5实现全屏API【进入和退出全屏】

现在主流浏览器基本上实现了全屏效果,但是不同浏览器实现不一样: 【进入和退出全屏】 // Webkit (works in Safari5.1 and Chrome 15) elemen...
  • xiao190128
  • xiao190128
  • 2016年04月09日 16:35
  • 1801

纯JS 全屏滚动 / 整屏翻页

原生js、纯js 实现全屏滚动代码,简单易懂
  • tangdou5682
  • tangdou5682
  • 2016年08月29日 11:17
  • 6911

用js控制flash来实现全屏效果

说起来真是惭愧,学习flash都三四年了,
  • mengtianwxs
  • mengtianwxs
  • 2014年07月02日 14:10
  • 4130

JS实现全屏页面切换

以前在网上看到过一些全屏切换的页面,网上也有一些JQuery的插件能够实现全屏切换的效果,今天用原生js简单的做了一下这个效果。1.实现原理其实要做出这个效果还是挺简单的,下面来分析一下: 1.首先...
  • Low_Key_Shulman
  • Low_Key_Shulman
  • 2016年04月25日 22:50
  • 1334

JavaScript浏览器全屏插件和jQuery元素大小调整插件

JavaScript浏览器全屏插件和jQuery元素大小调整插件1 摘要一些酷炫的网站需要对浏览器或者DOM元素进行自动或触发式全屏化。对于浏览器全屏,提示用户按F11的话似乎有点不太人道,在页面上进...
  • u013745854
  • u013745854
  • 2015年05月03日 19:17
  • 4239

js全屏操作之判断全屏

本文介绍了页面全屏的两种情况,使用h5全屏api(requestFullscreen)和使用浏览器自带的全屏快捷键“F11”进行全屏在两种情况下的区别,以及再这两种情况下如何有效的判断页面是否全屏,并...
  • k358971707
  • k358971707
  • 2017年03月05日 11:16
  • 4641
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js全屏
举报原因:
原因补充:

(最多只允许输入30个字)