html5——全屏显示
基本概念
1、HTML5规范允许用户自定义网页上任一元素全屏显示
2、requestFullscreen() 开启全屏显示、cancleFullscreen() 关闭全屏显示
3、不同浏览器兼容性不一样
4、全屏伪类div:-ms-fullscreen，表示在全屏后的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: yellow;
} div:-ms-fullscreen {
width: 600px;
} div:-moz-full-screen {
height: 400px;
} div:-webkit-full-screen {
height: 400px;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
if (this.requestFullscreen) {
this.requestFullscreen();
}
else if (this.mozRequestFullScreen) {
console.log(this.mozRequestFullScreen);
this.mozRequestFullScreen();
}
else if (this.webkitRequestFullScreen) {
console.log(this.webkitRequestFullScreen);
this.webkitRequestFullScreen();
}
}
</script>
</body>
</html>
html5——全屏显示的更多相关文章
- HTML5 全屏特性
全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧.先来看看有哪些API和事件支持. API ...
- 全屏显示网页FULLSCREEN API
第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...
- javascript full screen 全屏显示 页面元素
javascript full screen 全屏显示 页面元素 要想让页面的某个元素全屏显示,就像在网页上看视频的时候,可以全屏观看一样,该怎么实现呢? 一种最简单的方式,就是动态改变你想要全屏显示 ...
- HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit Firefox IE Element.requestFullscreen() ...
- How to Use HTML5 FUll Screen API（如何使用HTML5全屏接口） 【精】
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Fu ...
- How to Use HTML5 FUll Screen API（怎样使用HTML5全屏接口）
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 假设你不太喜欢变化太快的东西,那么web开发可能不适合你. 我曾在2012年末有写过F ...
- HTML5全屏操作API
一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...
- HTML5全屏背景视频与 CSS 和 JS（插件或库）
译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...
- JavaScript：让浏览器全屏显示
并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...
随机推荐
- jQuery下拉列表操作(转)
转地址:http://www.cnblogs.com/yaoshiyou/archive/2010/08/24/1806939.html jQuery获取Select选择的Text和Value:语法解 ...
- 条款50: 提高对C++的认识
class Base { public: virtual void f(int x); }; class Derived: public Base { public: virtual void f(d ...
- javascript 事件对象（event 对象）
原文: http://www.cnblogs.com/songyaqi/p/5204143.html <html> <head> <title> Track Mou ...
- 【ubuntu firefox】 Firefox is already running, but is not responding
在ubuntu下启动firefox报错 Firefox is already running, but is not responding. To open a new window, you mus ...
- Android---58---初学GPS定位
GPS英文是Global Positioning System 全球定位系统的简称. Android为GPS功能支持专门提供了一个LocationManager,位置管理器.全部GPS定位相关的服务. ...
- CoffeeScript里的字符串插值
拼接字符串是我们常干的事情.与其用很多的 "" + "",不如用一下字符串插值,可读性好些. 方法是在字符串中加入#{ 变量.表达式.函数等} getOther ...
- js实现伪音乐盒
支持快进 <div class="music-part"> <div class="box-bg"></div> <d ...
- SoapUI项目书写自我规范
-->Assertions 判断某个节点存在(_input_name, _button_name) -->Resource 文件夹命名 值去掉红色部分信息 https://mercury- ...
- ios11--UIButton
// // ViewController.m // 02-UIButton(在代码中使用) // #import "ViewController.h" @interface Vie ...
- android后台input命令模拟按键【转】
本文转载自:http://www.cnblogs.com/sh1o2os/archive/2013/02/05/2893201.html 有时做开发时,我们使用的触摸屏没有虚拟按键(HOME.BACK ...