js之切换全屏和退出全屏实现代码实例

这篇文章主要介绍了js之切换全屏和退出全屏实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

应用场景:

比如很多网页游戏全屏之类的，或者是网上看小说等。

核心代码:

//控制全屏
function enterfullscreen() { //进入全屏
  $("#fullscreen").html("退出全屏");
  var docElm = document.documentElement;
  //W3C
  if(docElm.requestFullscreen) {
    docElm.requestFullscreen();
  }
  //FireFox
  else if(docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
  }
  //Chrome等
  else if(docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
  }
  //IE11
  else if(elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }
}

function exitfullscreen() { //退出全屏
  $("#fullscreen").html("切换全屏");
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  } else if(document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

var a = 0;
$('#fullscreen').on('click', function() {
  a++;
  a % 2 == 1 ? enterfullscreen() : exitfullscreen();
})

前端代码:

<a type="button" id="fullscreen" class="btn btn-default visible-lg visible-md"><i class="fa fa-refresh" aria-hidden="true"></i> 切换全屏</a>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操作指定的内容,例如可以弹出一个登陆框之类的内容,下面就介绍一下如何实现此种效果,代码实例如下: 复制代码 代码如下: <!DOCTYPE html>    <html>    <head>    <meta charset=" utf-8">

  • JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

    HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScreen() 作用:请求某个元素element全屏 Document.getElementById("myCanvas").requestFullScreen() 这里是将其中的元素ID去请求fullscreen 退出全屏 document.cancelFullScreen() Document

  • 手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现

    PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品. 为谁而用 让移动站点的相册体验和原生App一样的设计师和开发者. 绝佳特性 PhotoSwipe提供给用户一个熟悉又直观的相册交互界面. 官方网站 http://www.photoswipe.com/ 源码示例 http://github.com/downloads/codecomputerlove/P

  • JS实现全屏的四种写法

    JS或jQuery实现全屏 JS写法一 .html <div class="container" <button id="full-screen">全屏</button> <button id="exit-fullscreen">退出</button> </div> .css /* Basic element styles */ html { color: #000; backgr

  • js实现各浏览器全屏代码实例

    现代浏览器包括ie11,可以直接用h5的全屏api实现 低版本的IE需要通过ActiveX插件实现: //直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="fullScreen()">现代浏览器全屏

  • JavaScript控制浏览器全屏显示简单示例

    JavaScript控制浏览器全屏显示简单示例

    本文实例讲述了JavaScript控制浏览器全屏显示.分享给大家供大家参考,具体如下: <!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"> <

  • JS 全屏和退出全屏详解及实例代码

    JS 全屏和退出全屏 js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌.火狐.360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏). 这个demo基本是够了,直接复制下面的源码另存为html文件看效果吧. <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <

  • JavaScript全屏和退出全屏事件总结（附代码）

    代码如下: window.isflsgrn = false;//ie11以下是否进入全屏标志,true为全屏状态,false为非全屏状态 window.ieIsfSceen = false;//ie11是否进入全屏标志,true为全屏状态,false为非全屏状态 //跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态 function fullscreenEnable(){ var isFullscreen = document.fullscreenEnabled || win

  • js之切换全屏和退出全屏实现代码实例

    这篇文章主要介绍了js之切换全屏和退出全屏实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 应用场景: 比如很多网页游戏全屏之类的,或者是网上看小说等. 核心代码: //控制全屏 function enterfullscreen() { //进入全屏 $("#fullscreen").html("退出全屏"); var docElm = document.documentElement; //W3C if

  • js全屏事件fullscreenchange 实现全屏、退出全屏操作

    本文实例为大家分享了js全屏事件fullscreenchange,实现全屏.退出全屏操作,供大家参考,具体内容如下 1.进入全屏 function launchFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen() } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen() } else if (el

  • android编程开发之全屏和退出全屏的实现方法

    本文实例讲述了android编程开发之全屏和退出全屏的实现方法.分享给大家供大家参考,具体如下: xml代码: <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/fullscreen" android:onClick

  • 原生js基于canvas实现一个简单的前端截图工具代码实例

    原生js基于canvas实现一个简单的前端截图工具代码实例

    这篇文章主要介绍了原生js基于canvas实现一个简单的前端截图工具代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 先看效果 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{

  • Vue实现购物车的全选、单选、显示商品价格代码实例

    Vue实现购物车的全选、单选、显示商品价格代码实例

    今天中午废了一会时间,总算把项目中的购物车的单选.全选.以及实现数据的动态显示做出来了,给小白分享一下我个人一个解决办法: 购物车的基本页面如下: 先说实现的总体思路 1.给table表中表头th加一个 checkbox,设这两个事件:@click="checkAll" v-model="checkall": 2.给对应的tr加一个 checkbox 绑定一个事件 v-model="checked",checked设为数组,专门放商品Id: 3.

  • vue中对监听esc事件和退出全屏问题的解决方案

    vue中对监听esc事件和退出全屏问题的解决方案

    目录 对监听esc事件和退出全屏问题的解决 下面是全屏的完整代码 element+vue全屏与退出全屏(监听ESC改样式) 一.效果 二.代码 对监听esc事件和退出全屏问题的解决 vue 的项目中使用了 h5 的全屏 API,在使用esc键退出全屏时,默认调用“ document.exitFullScreen() ” 直接退出,想要做监听并设置业务,需要监听屏幕size变化来出发事件 mounted() {          let that = this     window.addEven

  • vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

    对于vue-video-player,从github上找到一段代码,直接放页面!可以了,视频展示出来了!开始下一个功能.... 这可能是大部分前端开发者一贯的思维模式,拿来一个插件,看着demo就做出来了,功能展示正常就OK了,但是一旦出了bug,就会面向百度编程或者面向Google编程! 其实,我也是这样的,哈哈哈哈..... 废话不多说,最近在做一个视频播放的功能,找到vue-video-player插件后,咔咔咔完事,拿着我的爱疯,完美演绎!但是其他人的国产某牌手机,展示的完全不一样,打开

随机推荐