JavaScript全屏显示

需要引入的库

https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js
https://cdn.bootcss.com/screenfull.js/3.3.2/screenfull.min.js

全屏切换

screenfull.toggle();

打开全屏

screenfull.request();

退出全屏

screenfull.exit();

指定box全屏

//html
<div id="box"></div> //js
var box = document.getElementById('box');
screenfull.request(box);

注意:全屏展示都需要一个动作触发,例如:onclick

JavaScript全屏显示的更多相关文章

  1. 【温故而知新-Javascript】窗口效果 (全屏显示窗口、定时关闭窗口)

    1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  2. javascript full screen 全屏显示 页面元素

    javascript full screen 全屏显示 页面元素 要想让页面的某个元素全屏显示,就像在网页上看视频的时候,可以全屏观看一样,该怎么实现呢? 一种最简单的方式,就是动态改变你想要全屏显示 ...

  3. JavaScript实现全屏显示

    <!doctype html> <html> <head> <title>全屏显示</title> <meta charset=&qu ...

  4. JavaScript:让浏览器全屏显示

    并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...

  5. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  6. 全屏显示网页FULLSCREEN API

    第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...

  7. 在VC++6.0开发中实现全屏显示

    全屏显示是一些应用软件程序必不可少的功能.比如在用VC++编辑工程源文件或编辑对话框等资源时,选择菜单“View\Full Screen”,即可进入全屏显示状态,按“Esc”键后会退出全屏显示状态. ...

  8. Android 全屏显示的方法(不包含状态栏)

    我们都知道在Android中某些功能的实现往往有两种方法:一种是在xml文件中设置相应属性,另一种是用代码实现.同样Android实现全屏显示也可以通过这两种方法实现: 1.在AndroidManif ...

  9. Android 全屏显示

    Android全屏显示: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst ...

随机推荐

  1. 在Web工程中,普通Java类如何读文件

    我们在以前讨论过在Web工程不能采用Java工程原先的读取方式,即创建一个文件流(FileInputStream)并给出一个文件目录(从src开始找一直找到你要读取文件的目录),这种的方式是不可行的. ...

  2. Django Signal 代码布局

    需要确保信号注册函数在使用前就被引入,所以理论上你可以将其置于满足上述条件的任意位置. 官方推荐 将信号处理器定义在关联 app 目录下的 signals.py 中,在关联 app 的 apps.Ap ...

  3. z waiting to receive.**B0100000023be50

    [root@b ~]# rz▒z waiting to receive.**B0100000023be50

  4. Web 编程中路径问题

    web.xml 中 <url-pattern> 路径(即 Servlet 路径) 要么以 "*" 开头, 要么以 "/" 开头. 转发和包含路径(服 ...

  5. Django继承

    Django目前支持两种不同的继承方式,包括抽象基础类和多表继承. 1.抽象基础类: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 cla ...

  6. Vue(5)- axios、vuex

    一.内容回顾 1.webpack(前端中工作,项目上线之前对整个前端项目优化) - entry:整个项目的程序入口(main.js或index.js): - output:输出的出口: - loade ...

  7. window7+wamp环境配置Oracle数据库连接

    最近开发需要使用的oracle数据库!翻看了PHP手册,也在网上找了些帖子!功夫不负有心人,花费了四五个小时的时间,终于找到了Oracle的配置方法.下面就讲解下如何配置Oracle数据库连接吧! 附 ...

  8. python16_day07【class】

    一.初识类 1.类的两种作用:属性引用和实例化 class Garen: #定义英雄盖伦的类,不同的玩家可以用它实例出自己英雄; camp='Demacia' #所有玩家的英雄(盖伦)的阵营都是Dem ...

  9. php采集

    采集思路   采集程序的思路很简单大体可以分为以下几个步骤: 1. 获取远程文件源代码(file_get_contents或用fopen).    2.分析代码得到自己想要的内容(这里用正则匹配,一般 ...

  10. js, 树状菜单隐藏显示

    js写的不是很严谨~~~嘿嘿   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...