精华内容
参与话题
问答
  • 全屏

    千次阅读 2018-08-12 17:18:35
    //ie11以下是否进入全屏标志,true为全屏状态,false为非全屏状态 window.ieIsfSceen = false;//ie11是否进入全屏标志,true为全屏状态,false为非全屏状态 //跨浏览器返回当前 document 是否进入了可以请求全屏模式...
    window.isflsgrn = false;//ie11以下是否进入全屏标志,true为全屏状态,false为非全屏状态
    window.ieIsfSceen = false;//ie11是否进入全屏标志,true为全屏状态,false为非全屏状态
    //跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态
    function fullscreenEnable(){
    	var isFullscreen = document.fullscreenEnabled ||
    	window.fullScreen ||
    	document.mozFullscreenEnabled ||
    	document.webkitIsFullScreen;
    	return isFullscreen;
    }
    //全屏
    var fScreen = function(){
    	var docElm = document.documentElement;
    	if (docElm.requestFullscreen) {
    	  docElm.requestFullscreen();
    	}
    	else if (docElm.msRequestFullscreen) {
    	  docElm.msRequestFullscreen();
    	  ieIsfSceen = true;
    	}
    	else if (docElm.mozRequestFullScreen) {
    	  docElm.mozRequestFullScreen();
    	}
    	else if (docElm.webkitRequestFullScreen) {
    	  docElm.webkitRequestFullScreen();
    	}else {//对不支持全屏API浏览器的处理,隐藏不需要显示的元素
    	  window.parent.hideTopBottom();
    	  isflsgrn = true;
    	  $("#fullscreen").text("退出全屏");
    	}
    }
    
    //退出全屏
    var cfScreen = function(){
    	if (document.exitFullscreen) {
    	  document.exitFullscreen();
    	}
    	else if (document.msExitFullscreen) {
    	  document.msExitFullscreen();
    	}
    	else if (document.mozCancelFullScreen) {
    	  document.mozCancelFullScreen();
    	}
    	else if (document.webkitCancelFullScreen) {
    	  document.webkitCancelFullScreen();
    	}else {
    	  window.parent.showTopBottom();
    	  isflsgrn = false;
    	  $("#fullscreen").text("全屏");
    	}
    }
    
    //全屏按钮点击事件
    $("#fullscreen").click(function(){
    	var isfScreen = fullscreenEnable();
    	if(!isfScreen && isflsgrn == false){
    	  if (ieIsfSceen == true) {
    		document.msExitFullscreen();
    		ieIsfSceen = false;
    		return;
    	  }
    	  fScreen();
    	}else{
    	  cfScreen();
    	}
    })
    	
    //键盘操作
    $(document).keydown(function (event) {
    	if(event.keyCode == 27 && ieIsfSceen == true){
    	  ieIsfSceen = false;
    	}
    });
    
    
    
    
    //监听状态变化
    if (window.addEventListener) {
    document.addEventListener('fullscreenchange', function(){ 
      if($("#fullscreen").text() == "全屏"){
    	$("#fullscreen").text("退出全屏"); 
      }else{
    	$("#fullscreen").text("全屏");
      }
    });
    document.addEventListener('webkitfullscreenchange', function(){ 
      if($("#fullscreen").text() == "全屏"){
    	$("#fullscreen").text("退出全屏"); 
      }else{
    	$("#fullscreen").text("全屏");
      }
    });
    document.addEventListener('mozfullscreenchange', function(){ 
      if($("#fullscreen").text() == "全屏"){
    	$("#fullscreen").text("退出全屏"); 
      }else{
    	$("#fullscreen").text("全屏");
      }
    });
    document.addEventListener('MSFullscreenChange', function(){ 
      if($("#fullscreen").text() == "全屏"){
    	$("#fullscreen").text("退出全屏"); 
      }else{
    	$("#fullscreen").text("全屏");
      }
    });
    }

     

    展开全文
  • 当我们使用video标签的时候,有时候因为更多的需要,我们要自己自定义控制栏,而进入和退出全屏也是其中的一部分 不同的浏览器有不同的实现方法 // Webkit element.webkitRequestFullScreen();//...

    已迁移到个博 Eighteen blog

    当我们使用video标签的时候,有时候因为更多的需要,我们要自己自定义控制栏,而进入和退出全屏也是其中的一部分

    该功能也同样适用于其他全屏需求。


    • 不同的浏览器有不同的实现方法
    // Webkit
    element.webkitRequestFullScreen();//进入全屏
    document.webkitCancelFullScreen();//退出全屏
    
    // Firefox
    element.mozRequestFullScreen();
    document.mozCancelFullScreen();
     
    // W3C 
    element.requestFullscreen();
    document.exitFullscreen();
     
    
    • 一般兼容性写法,我们先使用w3c标准的方法,如果不可以在兼容不同浏览器。
    //进入全屏
    function FullScreen() {
        var ele = document.documentElement;
        if (ele.requestFullscreen) {
            ele.requestFullscreen();
        } else if (ele.mozRequestFullScreen) {
            ele.mozRequestFullScreen();
        } else if (ele.webkitRequestFullScreen) {
            ele.webkitRequestFullScreen();
        }
    }
    //退出全屏
    function exitFullscreen() {
        var de = document;
        if (de.exitFullscreen) {
            de.exitFullscreen();
        } else if (de.mozCancelFullScreen) {
            de.mozCancelFullScreen();
        } else if (de.webkitCancelFullScreen) {
            de.webkitCancelFullScreen();
        }
    }
    
    • 接下来是用例
    $(ele).on('click',function(){
        FullScreen();
       // exitFullscreen();
    });
    
    • 当页面是iframe引入的时候,这时候全屏功能会直接报错,原因是因为iframe默认不同意其嵌入的内容可以直接开启全屏,需要我们手动配置一下。很简单。
     <iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"><iframe/>
    
    展开全文
  • Android 图片浏览全屏缩放

    千次下载 热门讨论 2014-05-10 23:18:39
    高仿现在主流的图片浏览的全屏缩放效果。如QQ好友动态、微信朋友圈。
  • Android 切换全屏,取消全屏

    千次阅读 2017-06-27 08:52:41
    切换全屏,取消全屏/** * 切换全屏,取消全屏 * * @param isChecked */ private void switchFullScreen(boolean isChecked) { if (isChecked) { //切换到全屏模式 //添加一个全屏的标记 getWindow().addFlags...

    切换全屏,取消全屏

    /**
     * 切换全屏,取消全屏
     *
     * @param isChecked
     */
    private void switchFullScreen(boolean isChecked) {
        if (isChecked) {
            //切换到全屏模式
            //添加一个全屏的标记
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
            //请求横屏
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
    
            //设置视频播放控件的布局的高度是match_parent
            FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) mVideoRootView.getLayoutParams();
            //将默认的高度缓存下来
            mVideoHeight = layoutParams.height;
            layoutParams.height = FrameLayout.LayoutParams.MATCH_PARENT;
            mVideoRootView.setLayoutParams(layoutParams);
        } else {
            //切换到默认模式
            //清除全屏标记
            getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
            //请求纵屏
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    
            //设置视频播放控件的布局的高度是200
            FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) mVideoRootView.getLayoutParams();
            layoutParams.height = mVideoHeight;  //这里的单位是px
            mVideoRootView.setLayoutParams(layoutParams);
        }
    }
    

    横竖屏切换时的生命周期总结:

    1、不设置Activity的android:configChanges时,切屏会重新调用各个生命周期,切横屏时会执行一次,切竖屏时会执行两次

    2、设置Activity的android:configChanges=”orientation”时,切屏还是会重新调用各个生命周期,切横、竖屏时只会执行一次

    3、设置Activity的android:configChanges=”orientation|keyboardHidden”时,切屏不会重新调用各个生命周期,只会执行onConfigurationChanged方

    展开全文
  • jquery全屏及退出全屏

    千次阅读 2019-01-26 04:39:23
    requestFullScreen:请求全屏 exitFullscreen:退出全屏 cancelFullScreen:取消全屏 fullscreenchange:监听全屏变化 html <li id="js_full_screen"><span class="iconfont-full-scre...
        

    涉及方法:

    html

    <li id="js_full_screen"><span class="iconfont-full-screen"></span></li>

    clipboard.pngclipboard.png

    js

    // 全屏
    var $fullScreenEle = $('#js_full_screen'),
        $fsChildEle = $fullScreenEle.children(),
        $navbarEle = $('.zh-navbar'),
        $headerEle = $('.zh-header');
    $fullScreenEle.click(function() {
        if($fsChildEle.hasClass('iconfont-full-screen')) { // 全屏
            var docEle = document.documentElement;
            var rfs = docEle.requestFullScreen || docEle.webkitRequestFullScreen || docEle.mozRequestFullScreen || docEle.msRequestFullScreen;
            if (rfs) {
                rfs.call(docEle);
            } else if (typeof window.ActiveXObject !== "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            }
            $fsChildEle.removeClass('iconfont-full-screen').addClass('iconfont-exit-screen');
            $navbarEle.hide();
            $headerEle.css('top', 10);
        } else { // 退出全屏
            var cfs = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.exitFullScreen;
            if (cfs) {
                cfs.call(document);
            } else if (typeof window.ActiveXObject !== "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }
    });
    
    // 通过resize事件监听退出全屏
    $(window).resize(function() {
        var prevWinHgt = window.sessionStorage.getItem('winHgt');
        if(prevWinHgt) {
            if(window.innerHeight<prevWinHgt && $fsChildEle.hasClass('iconfont-exit-screen')) {
                $fsChildEle.removeClass('iconfont-exit-screen').addClass('iconfont-full-screen');
                $navbarEle.show();
                $headerEle.css('top', 60);
            }
        }
        window.sessionStorage.setItem('winHgt', window.innerHeight);
    });

    也可通过fullscreenchange来监控全屏变化

    document.addEventListener("fullscreenchange", function(e) {
        console.log("fullscreenchange", e);
    });
    document.addEventListener("mozfullscreenchange", function(e) {
        console.log("mozfullscreenchange ", e);
    });
    document.addEventListener("webkitfullscreenchange", function(e) {
        console.log("webkitfullscreenchange", e);
    });
    document.addEventListener("msfullscreenchange", function(e) {
        console.log("msfullscreenchange", e);
    });
    展开全文
  • 全屏及退出全屏

    2016-10-31 17:00:13
    全屏 全屏 //进入全屏 function requestFullScreen() { var de = document.documentElement; if (de.requestFullscreen) { de.requestFullscreen(); } else if (de
  • 实现全屏和取消全屏

    2019-07-09 09:12:53
    实现全屏和取消全屏需要用到h5中的新特性—requestScreenFull和cancelScreenFull两个特性 给一个全屏按钮绑定一个点击事件,例如点击时触发 $(‘全屏按钮的选择器’).οnclick=function(){ if(screen....
  • JS实现全屏和退出全屏

    千次阅读 2019-05-06 20:15:41
    JS实现全屏和退出全屏 //全屏 function fullScreen(){ var el = document.documentElement; var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el....
  • HTML JS全屏和退出全屏

    千次阅读 2019-06-12 17:52:40
    HTML JS全屏和退出全屏全屏方法退出全屏方法调用代码判断全屏错误的做法错误分析正确的做法 全屏方法 function launchIntoFullscreen(element) { if(element.requestFullscreen){ element.requestFullscreen()...
  • layer系列之-弹出层全屏及关闭

    万次阅读 2016-10-09 11:14:39
    一、首先引用JS文件 <script src="../../js/common/layer/layer.js"></script> 二、全屏调用以下代码 var index = layer.open({ type: 2, content: url, ...
  • 全屏及监听全屏事件

    千次阅读 2018-08-22 10:21:00
    在 HTML5 中, W3C 制定了关于全屏的 API,就可以实现全屏幕的效果,全屏目前只有 google chrome 15 +, ...全屏: var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.req...
  • H5实现全屏与F11全屏

    2018-10-29 00:56:00
    最近做项目用到全屏,现总结一下全屏: 1.局部全屏:H5全屏和F11有区别,在这种情况下判断全屏只需要通过H5全屏属性,无论全屏后有无滚动条都可判断。 1 /** 2 * [isFullscreen 判断浏览器是否全屏] 3 * @...
  •  网页全屏和退出全屏其实已经算的上一个很常见的功能了,那是不是直接用HTML5全屏API就没什么问题了,但是不要忘了键盘上的F11有着同样的功能,实际使用的时候就发现F11使网页进入全屏后,以HTML5的全屏API退出全屏...
  • Pycharm全屏

    千次阅读 2019-07-09 10:00:26
    Pycharm有演示模式、无干扰模式、和全屏模式。 Pycharm“演示”模式 演示模式和PPT的演示效果一样,如下图: 退出演示的全屏 鼠标移到屏幕顶端,会显示隐藏的工具栏 彻底退出演示模式 Pycharm的“无干扰”模式 ...
  • js实现全屏和退出全屏功能

    万次阅读 2018-11-13 20:24:03
    主要是全屏和退出全屏事件,以及相应的操作(采用window.onresize监测) $(function(){ //全屏 $(&quot;#fullScreen&quot;).on(&quot;click&quot;,function(){ fullScreen(); }) //退出...
  • js全屏操作之判断全屏

    万次阅读 2017-03-05 11:16:02
    本文介绍了页面全屏的两种情况,使用h5全屏api(requestFullscreen)和使用浏览器自带的全屏快捷键“F11”进行全屏在两种情况下的区别,以及再这两种情况下如何有效的判断页面是否全屏,并提供解决方案。
  • Qt窗口全屏或控件全屏

    万次阅读 热门讨论 2016-11-23 20:32:51
    Qt全屏显示 Qt控件全屏
  • js浏览器全屏设置

    万次阅读 2018-06-28 09:57:58
    1. 进入全屏 function requestFullScreen () { var elem = document.documentElement if (elem.requestFullscreen) { elem.requestFullscreen() } else if (elem.mozRequestFullScreen) { elem.mozReque...
  • 1.进入全屏 function launchFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen() } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen() } else ...
  • 前言:有些时候遇到bug与其把事情想得复杂,还不如回去看看官方文档。...测试全屏测试全屏测试全屏测试全屏测试全屏测试全屏测试全屏</div><button type="button" @click="btnFull">全屏...
  • UWP 全屏与退出全屏

    2019-06-27 17:52:15
    # #作者:韦访 #博客:...#微信:1007895847 #添加微信的备注一下是CSDN的 #欢迎大家一起学习 # 全屏的函数, private void FullScreen() { ApplicationView view = ApplicationView.GetFo...
  • 远程桌面退出全屏/不能全屏/全屏切换的技巧退出全屏 问:我的电脑远程登录到服务器上并且切换到了全屏状态,全屏后发现桌面顶部没有浮动工具栏了,想退出全屏状态,不知如何退出了,最后,只有重启电脑。想知道如何...
  • 浏览器全屏模式的启动函数requestFullscreen(),而且需要附带各浏览器的js方言前缀. Js代码: // 启动全屏!判断浏览器的种类 function launchFullscreen(element) { if(element.requestFullscreen) { element....
  • H5 video全屏与取消全屏各浏览器兼容 requestFullscreen()全屏方法,exitFullscreen()退出全屏方法。兼容各个浏览器与css3兼容一样加个前缀即可。 // 全屏 // ele:全屏的对象 function requestFullscreen(ele...

空空如也

1 2 3 4 5 ... 20
收藏数 40,165
精华内容 16,066
关键字:

全屏