精华内容
下载资源
问答
  • 2022-02-08 10:00:47

    全屏API

    H5有一个全屏API,Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

    需要注意的是:只有包含在顶层文档内部的标准HTML元素、svg元素和math元素,以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素,以及object的内部元素不能进入全屏模式。

    示例代码如下:

    <!doctype html>
    <html>
        <head>
          <meta charset="UTF-8"/>
            <title>全屏不全屏</title>
        </head>
        <body>
          <button id="fullScreen">全屏模式</button>
          <button id="noFullScreen">取消全屏</button>
         </body>
    </html>
    <script>
           document.getElementById("fullScreen").onclick=function(){
              if(document.documentElement.RequestFullScreen){
                document.documentElement.RequestFullScreen();
              }
              //兼容火狐
              console.log(document.documentElement.mozRequestFullScreen)
              if(document.documentElement.mozRequestFullScreen){
                document.documentElement.mozRequestFullScreen();
              }
              //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
              if(document.documentElement.webkitRequestFullScreen){
                document.documentElement.webkitRequestFullScreen();
              }
              //兼容IE,只能写msRequestFullscreen
              if(document.documentElement.msRequestFullscreen){
                document.documentElement.msRequestFullscreen();
              }
           }
           document.getElementById("noFullScreen").onclick=function(){
              if(document.exitFullScreen){
                document.exitFullscreen()
              }
              //兼容火狐
              console.log(document.mozExitFullScreen)
              if(document.mozCancelFullScreen){
                document.mozCancelFullScreen()
              }
              //兼容谷歌等
              if(document.webkitExitFullscreen){
                document.webkitExitFullscreen()
              }
              //兼容IE
              if(document.msExitFullscreen){
                document.msExitFullscreen()
              }
           }
    </script>
    

    全屏事件

    如果元素被允许进入全屏模式,document对象会收到一个fullscreenchange事件,通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可,则会收到一个fullscreenerror事件。

    document.addEventListener('fullscreenchange', function(){ /*code*/ });
    document.addEventListener('webkitfullscreenchange', function(){ /*code*/});
    document.addEventListener('mozfullscreenchange', function(){ /*code*/});
    document.addEventListener('MSFullscreenChange', function(){ /*code*/});
    
    document.addEventListener('fullscreenerror', function(){ /*code*/ });
    document.addEventListener('webkitfullscreenerror', function(){ /*code*/});
    document.addEventListener('mozfullscreenerror', function(){ /*code*/);
    document.addEventListener('MSFullscreenError', function(){ /*code*/ });
    
    

    全屏样式

    全屏之后还可以选择性的调整样式,就和hover一样,如下所示:

    :-webkit-full-screen { }
    :-moz-full-screen { }
    :-ms-fullscreen { }
    :fullscreen { }
    

    工作之余 用博客记录自己 希望有能帮助到各位看官
    如有错误或不全面的地方望各位能提点一二和留下宝贵意见

    更多相关内容
  • 主要介绍了jQuery中弹出iframe内嵌页面元素到父页面全屏化的实例代码,需要的朋友可以参考下
  • 火狐、谷歌、ie下javascript全屏,可整个页面全屏,也可指定某一元素全屏
  • vmware中让页面全屏的方法

    千次阅读 2019-12-29 17:26:51
    ...安装完成后,会在ubuntu中看到这样一个压缩文件; ...这里也可以cd到这个文件夹,然后用tar命令进行解压; ...解压后进入到该文件夹中,可以看到有这样一个文件: ...完成后,重启即可全屏;效果:

    在这里插入图片描述
    首先点击虚拟机——>安装vmware tools;安装完成后,会在ubuntu中看到这样一个压缩文件;
    在这里插入图片描述
    将该压缩文件复制到你认为可以安装的地方,然后点击右键——>提取到此处;这里也可以cd到这个文件夹,然后用tar命令进行解压;
    在这里插入图片描述
    解压后进入到该文件夹中,可以看到有这样一个文件:
    在这里插入图片描述
    在终端通过cd命令进入到该文件夹中,执行:

    sudo ./vmware-install.pl
    

    完成后,重启即可全屏;效果:
    在这里插入图片描述

    展开全文
  • JS实现页面全屏功能

    2021-10-07 16:15:17
    Title 参考:JS实现页面全屏功能_小Q的博客-CSDN博客
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="fullScreenDiv" style="width: 100px; height: 100px; background-color: #0AD4EC">
        <input type="button" value="全屏" onclick="enterFullscreen()"/>
        <input type="button" value="退出" onclick="exitFullscreen()"/>
    </div>
    </body>
    
    <script type="text/javascript">
        // 全屏操作类
        function FullScreen() {
            this.requestFullscreenFunName = null;
            this.exitFullscreenFunName = null;
            this.supprotFullScreen = false;
    
            let body = document.body;
            if (typeof body.requestFullscreen === 'function') {
                this.requestFullscreenFunName = 'requestFullscreen';
            } else if (typeof body.mozRequestFullScreen === 'function') {
                this.requestFullscreenFunName = 'mozRequestFullScreen';
            } else if (typeof body.msRequestFullscreen === 'function') {
                this.requestFullscreenFunName = 'msRequestFullscreen';
            } else if (typeof body.oRequestFullscreen === 'function') {
                this.requestFullscreenFunName = 'oRequestFullscreen';
            } else if (typeof body.webkitRequestFullscreen === 'function') {
                this.requestFullscreenFunName = 'webkitRequestFullscreen';
            }
    
            if (typeof document.exitFullscreen === 'function') {
                this.exitFullscreenFunName = 'exitFullscreen';
            } else if (typeof document.msExitFullscreen === 'function') {
                this.exitFullscreenFunName = 'msExitFullscreen';
            } else if (typeof document.mozCancelFullScreen === 'function') {
                this.exitFullscreenFunName = 'mozCancelFullScreen';
            } else if (typeof document.oRequestFullscreen === 'function') {
                this.exitFullscreenFunName = 'oRequestFullscreen';
            } else if (typeof document.webkitExitFullscreen === 'function') {
                this.exitFullscreenFunName = 'webkitExitFullscreen';
            }
    
            this.supprotFullScreen = (null !== this.requestFullscreenFunName && null !== this.exitFullscreenFunName);
    
            // 进入全屏
            this.enterFullscreen = function (element) {
                if (!this.supprotFullScreen) {
                    return;
                }
                element[this.requestFullscreenFunName]();
            };
    
            // 退出全屏
            this.exitFullscreen = function () {
                if (!this.supprotFullScreen) {
                    return;
                }
                document[this.exitFullscreenFunName]();
            }
        }
    
        // 全屏操作对象
        let fullScreen = new FullScreen();
    
        // 进入全屏
        function enterFullscreen() {
            fullScreen.enterFullscreen(document.getElementById('fullScreenDiv'));
        }
    
        // 退出全屏
        function exitFullscreen(){
            fullScreen.exitFullscreen();
        }
    </script>
    </html>

    参考:JS实现页面全屏功能_小Q的博客-CSDN博客

    展开全文
  • 本文实例讲述了js控制页面全屏展示和退出全屏显示的方法。分享给大家供大家参考。具体实现方法如下: 代码如下:<!DOCTYPE html>  <html>  <meta http-equiv=”Content-Type” content=”text/html;...
  • 以下demo是页面进行全屏和正常屏幕的,你也可以用元素来进行全屏,当然 只有包含在顶层文档(top-level document)内部的标准HTML元素、元素和元素,以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏...

    Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

    以下demo是页面进行全屏和正常屏幕的,你也可以用元素来进行全屏,当然

    只有包含在顶层文档(top-level document)内部的标准HTML元素、<svg>元素和<math>元素,以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素,以及object的内部元素不能进入全屏模式。这段是从https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullScreen抄过来的。


    <!doctype html>
    <html>
        <head>
        	<meta charset="UTF-8"/>
            <title>全屏不全屏</title>
        </head>
        <body>
              <input id="fullScreen" type="button" value="全屏"/>
    			<input id="fullScreenNormal" type="button" value="正常"/>
         </body>
    </html>
    <script>
           document.getElementById("fullScreen").οnclick=function(){
           		if(document.documentElement.RequestFullScreen){
           			document.documentElement.RequestFullScreen();
           		}
           		//兼容火狐
           		console.log(document.documentElement.mozRequestFullScreen)
           		if(document.documentElement.mozRequestFullScreen){
           			document.documentElement.mozRequestFullScreen();
           		}
           		//兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
           		if(document.documentElement.webkitRequestFullScreen){
           			document.documentElement.webkitRequestFullScreen();
           		}
           		//兼容IE,只能写msRequestFullscreen
           		if(document.documentElement.msRequestFullscreen){
           			document.documentElement.msRequestFullscreen();
           		}
           }
           document.getElementById("fullScreenNormal").οnclick=function(){
           		if(document.exitFullScreen){
           			document.exitFullscreen()
           		}
    //     		//兼容火狐
    //     		console.log(document.mozExitFullScreen)
           		if(document.mozCancelFullScreen){
           			document.mozCancelFullScreen()
           		}
    //     		//兼容谷歌等
           		if(document.webkitExitFullscreen){
           			document.webkitExitFullscreen()
           		}
    //     		//兼容IE
           		if(document.msExitFullscreen){
           			document.msExitFullscreen()
           		}
           }
    </script>


    展开全文
  • HTML页面全屏显示-Fullscreen API

    千次阅读 2022-03-13 10:02:27
    使用 Fullscreen API 处理页面中的全屏问题
  • js实现简单页面全屏

    2020-10-16 09:27:53
    主要为大家详细介绍了js实现简单页面全屏的功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文实例为大家分享了js模拟F11页面全屏显示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>测试全屏</title> <...
  • 本文主要是将最近工作中遇到的一个问题进行总结分享,主要介绍的是如何WebView中H5页面全屏播放视频。关于这个问题,做一下简单分析,希望对大家有所帮助,下面话不多说了,来看看详细的介绍吧。 效果图 运行效果...
  • jQuery全屏TAB页面切换代码是一款通过鼠标滚动页面或点击导航,tab页面滚屏切换效果代码。
  • 微信小程序的页面图片全屏滑动切换,全屏动画滚动,用手在屏幕上轻轻滑动,图片就滚动,类似于网页中的幻灯片切换效果,增加操作的乐趣性和美观度,是个不错的图片浏览特效。相关参数定义如下:  scrollindex:0, ...
  • 一款非常大气的全屏网站切换特效,点击顶部固定导航菜单链接自动切换到对应内容的jQuery全屏页面滚动导航切换效果。
  • css3微信营销介绍页面全屏滚动html5模板
  • ui页面全屏滚动插件fullPage是一款它能够很方便、很轻松的制作出全屏网站的fullPage.js插件。
  • 轻巧且无依赖的js库使网页自动全屏显示 #用法 < script src =" /path/to/fullScreen.js " > </ script > < script > // example 1: // // '#body1' min height(px) = // [browser inner ...
  • jquery响应式全屏页面垂直滚动效果支持手机端全屏页面滚动 jquery响应式全屏页面垂直滚动效果支持手机端全屏页面滚动
  • jQuery全屏页面滚动效果页面上下滚动效果代码jq插件
  • js实现页面全屏

    千次阅读 2019-12-01 10:11:01
    js实现全屏显示、需要用到 element.requestFullscreen()方法,该方法是用来发出异步请求使元素(element)进入全屏模式,如果成功,该元素会触发fullscreenchange;如果失败,则会触发fullscreenerror事件; <!...
  • 主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue实现页面全屏和退出全屏
  • vue 实现全屏功能

    2022-04-14 14:35:05
    vue 实现全屏功能
  • 主要介绍了vue实现浏览器全屏展示功能,项目中使用的是sreenfull插件,执行命令安装,具体实现代码跟随小编一起看看吧
  • fullpage 手机端html5全屏滚动页面 *使用到的[removed]fullpage.js index.html界面用到的滚动效果是fullpage.js,使用起来非常的简单方便
  • jQuery网站右侧导航按钮控制页面全屏滚动代码是一款jQuery页面全屏滚动特效,点击右侧固定层的图标导航滚动切换到相应内容。
  • 1、vuex创建全局变量 在store/index中: ... // 全屏 fullscreen: false, }, mutations: { // 全屏 SET_FULLSCREEN: (state, fullscreen) => { state.fullscreen = fullscreen }, },

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 70,569
精华内容 28,227
关键字:

如何让页面全屏