资讯频道 → Web前端
阅读更多

3顶
0踩

Web前端

原创新闻 在 Web 应用中实现全屏效果

2012-11-08 15:27 by 副主编 wangguo 评论(1) 有12802人浏览
web javascript 全屏 api

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

随着HTML5技术和浏览器的发展，Web应用程序也能像本地应用一样实现全屏，而且现在大部分浏览器都支持全屏。Fullscreen JavaScript API让这一切变得简单，本文来探讨一下如何让Web应用程序实现全屏效果。

启动全屏模式

可以通过Fullscreen API中的requestFullScreen方法来实现。由于该方法还未标准化，因此还需要加上特定浏览器前缀。 

// 找到正确的方法
function launchFullScreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}

// 启动全屏模式
launchFullScreen(document.documentElement); // 整个页面
launchFullScreen(document.getElementById("videoElement")); // 单独元素

取消全屏模式

可以使用cancelFullScreen方法（也需要加上前缀）从全屏模式恢复到标准模式。 

function cancelFullscreen() {
  if(document.cancelFullScreen) {
    document.cancelFullScreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}

// 取消全屏
cancelFullscreen();

需要注意的是，cancelFullScreen只被文档对象调用，无需单个元素调用。

全屏属性和事件

  • document.fullScreenElement：当前全屏显示的元素。
  • document.fullScreenEnabled：判断浏览器是否支持全屏。
  • fullscreenchange事件：全屏状态改变事件。
fullscreenchange事件要绑定在document上，该事件仅在全屏状态改变时触发，默认没有任何动作。 

var fullscreenElement = document.fullScreenElement || document.mozFullScreenElement || document.webkitFullScreenElement;
var fullscreenEnabled = document.fullScreenEnabled || document.mozScreenEnabled || document.webkitScreenEnabled;

全屏CSS

全屏效果的CSS代码： 

/* html */
:-webkit-full-screen {
  background: pink;
}
:-moz-full-screen {
  background: pink;
}

/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

简单演示：http://davidwalsh.name/demo/fullscreen.php

你也可以查看Mozilla的BananaBread演示，这是一个第一人称射击游戏，fullscreen API在该游戏中得到了完美的应用。

Via davidwalsh
3
顶
0
踩
评论 共 1 条 请登录后发表评论
1 楼 rapin 2012-11-16 13:17
IE一直是个痛

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • c++中多重继承的使用

    // ConsoleApplication1.cpp : 定义控制台应用程序的入口点。 // #include "stdafx.h" #include using namespace std; class A { public: A(); ~A(); void print(){ cout } private: }; class B:p

  • Java多重继承的两种方式

    参考网址： https://www.cnblogs.com/chenssy/p/3389027.html 1.使用接口 public class Superhero extends ActionCharacter implements FlyAbility,SwimAbility{ @Override void fight() { System.out.prin...

  • 继承（派生类的三种继承方式，多重继承，虚继承）

    前半部分来自：https://www.cnblogs.com/Rosanna/p/3331578.html   继承性是面向对象程序设计的第二大特性，它允许在既有类的基础上创建新类，新类可以继承既有类的数据成员和成员函数，可以添加自己特有的数据成员和成员函数，还可以对既有类中的成员函数重新定义。利用类的继承和派生实现了更高层次的代码可重用性，符合现代软件开发的思想。       C++语言同时...

  • Java多重继承实现方法

    我们都知道，在Java中一个类可以多重实现，但是不能多重继承。也就是说一个类可以同时实现多个接口，但不能同时继承多个类。有时候我们需要让一个类同时拥有多个类的行为功能。这时候使用单继承特性就很难解决问题了。幸运的是Java提供的内部类可以用来解决此问题。 内部类的一个重要特性:内部类可以继承一个与外部类无关的类，保证了内部类的独立性，正是基于这一点， 多重继承才会成为可能。这种内部类叫做成员内部...

  • C++之多重继承

    一.   非虚拟继承的内存布局1.示例代码：class Base{public:     virtual void func()     {         cout     }     int a;};class Derived1 :public Base{public:     virtual void func()     { 

  • tomcat 报错：严重: BAD packet signature 18245（转）

    解决办法：修改AJP协议使用的端口，及tomcat下-conf-service.xml里的<Connector port="8009" enableLookups="false" redirectPotr="8443" protocol="AJP/1.3" />,将端口8009修改成其他的，或者查找使用该端口...

  • 严重: BAD packet signature 18245

    发现是我不小心将url上的端口号写错了. 转载于:https://www.cnblogs.com/anee/archive/2011/12/14/2675901.html

  • BAD packet signature 18245 错误解决

    1、错误信息 2014-7-15 2:46:38 org.apache.jk.common.MsgAjp ...严重: BAD packet signature 18245 2014-7-15 2:46:38 org.apache.jk.common.ChannelSocket processConnection 严重: Error, processing conne

  • Tomcat报BAD packet signature 18245错误的原因

    今天在启动服务器时，报了一个BAD packet signature 18245错误 详细错误如下： [java] view plaincopy 2009-6-511:09:11org.apache.jk.common.MsgAjpprocessHeader 严重:BADpacketsignature18245 2009-...

  • Tomcat无法shutdown SEVERE: BAD packet signature

    错误日志： SEVERE: Error, processing connectionjava.lang.IndexOutOfBoundsExceptionat java.io.BufferedInputStream.read(BufferedInputStream.java:327)at org.apache.jk.common.ChannelSocket.read(Channel...

  • 服务器tomcat报错:BAD packet signature 18245

    严重:BAD packet signature 18245 严重：Error, processing connection. java.lang.IndexOutOfBoundsexception. 通过日志错误信息，可以判定不是程序问题。通过查看相关资料可以判定是有人访问程序的...

  • BAD packet signature 18245

      今天在启动服务器时，报了一个BAD packet signature 18245错误 详细错误如下： view plaincopy to clipboard...严重: BAD packet signature 18245  03.2009-6-5 11:09:11 org.apache

  • 【转】BAD packet signature 18245 错误解决 .

    2014-7-15 2:46:38 org.apache.jk.common.MsgAjp processHeader严重: BAD packet signature 182452014-7-15 2:46:38 org.apache.jk.common.ChannelSocket processConnection严重: Error, processing connectio...

  • tomcat报BAD packet signature 18245错误的原因

    最近把项目部署到windows服务器上面，通过tomcat跑80端口，一直很稳定。今天在查tomcat日志时，发现了大量的错误日志，错误详细信息如下： ...严重: BAD packet signature 18245 2009-11-15 16:09:05 org.ap

  • nginx-1.24.0.tar

    Nginx 1.24.0 是 Nginx 开源项目发布的一个重要更新版本，该版本在性能优化、功能增强以及安全性提升方面带来了诸多改进。当您下载 Nginx 1.24.0 的压缩包时，您将获得一个包含 Nginx 源代码的压缩文件，通常命名为 nginx-1.24.0.tar.gz（对于 GNU/Linux 和 macOS 系统）或类似的格式，具体取决于发布平台。 这个压缩包包含了编译 Nginx 服务器所需的所有源代码文件、配置文件模板（如 nginx.conf）、模块源码以及构建和安装说明。通过解压这个压缩包，您可以在支持 C 语言编译器的操作系统上编译并安装 Nginx 1.24.0。 Nginx 1.24.0 引入了一系列新特性和优化，可能包括但不限于对 HTTP/2 和 HTTP/3 协议的进一步支持、性能提升、新的模块或模块更新，以及对已知安全漏洞的修复。这使得 Nginx 能够在保持其作为高性能 HTTP 和反向代理服务器的声誉的同时，继续满足不断发展的网络需求。

  • 智能化病虫害标注系统前端.zip

    图像识别技术在病虫害检测中的应用是一个快速发展的领域，它结合了计算机视觉和机器学习算法来自动识别和分类植物上的病虫害。以下是这一技术的一些关键步骤和组成部分： 1. **数据收集**：首先需要收集大量的植物图像数据，这些数据包括健康植物的图像以及受不同病虫害影响的植物图像。 2. **图像预处理**：对收集到的图像进行处理，以提高后续分析的准确性。这可能包括调整亮度、对比度、去噪、裁剪、缩放等。 3. **特征提取**：从图像中提取有助于识别病虫害的特征。这些特征可能包括颜色、纹理、形状、边缘等。 4. **模型训练**：使用机器学习算法（如支持向量机、随机森林、卷积神经网络等）来训练模型。训练过程中，算法会学习如何根据提取的特征来识别不同的病虫害。 5. **模型验证和测试**：在独立的测试集上验证模型的性能，以确保其准确性和泛化能力。 6. **部署和应用**：将训练好的模型部署到实际的病虫害检测系统中，可以是移动应用、网页服务或集成到智能农业设备中。 7. **实时监测**：在实际应用中，系统可以实时接收植物图像，并快速给出病虫害的检测结果。 8. **持续学习**：随着时间的推移，系统可以不断学习新的病虫害样本，以提高其识别能力。 9. **用户界面**：为了方便用户使用，通常会有一个用户友好的界面，显示检测结果，并提供进一步的指导或建议。 这项技术的优势在于它可以快速、准确地识别出病虫害，甚至在早期阶段就能发现问题，从而及时采取措施。此外，它还可以减少对化学农药的依赖，支持可持续农业发展。随着技术的不断进步，图像识别在病虫害检测中的应用将越来越广泛。

  • Python 小游戏 （贪吃蛇、五子棋、扫雷、俄罗斯方块）

    python

  • MATLAB/simulink 电力系统之变压器仿真-变压器空载运行仿真，磁通饱和+励磁电流

    MATLAB/simulink 电力系统之变压器仿真- 变压器空载运行仿真，磁通饱和+励磁电流

  • 超级好的电赛习题分享.zip

    电赛习题.zip

Global site tag (gtag.js) - Google Analytics