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 ...
随机推荐
- [poj2425]A Chess Game_博弈论
A Chess Game poj-2425 题目大意:题目链接 注释:略. 想法:这个题就是为什么必须要用记忆化搜索.因为压根就不知道后继是谁. 我们通过SG定理可知:当前游戏的SG值等于所有子游戏的 ...
- NetCore发布WebApi项目到IIS服务器中
1.确保已在机器上安装Net Core Runtime,,下载地址: https://dotnet.microsoft.com/download 2.点击WebApi项目右键->发布,选择IIS ...
- 从一个简单的例子谈谈package与import机制
转,原文:http://annie09.iteye.com/blog/469997 http://blog.csdn.net/gdsy/article/details/398072 这两篇我也不知道到 ...
- [JavaEE] Data Validation
When we create Entity and Respority, we also need to do validations to protect our data. In Java, va ...
- Java深入浅出系列（四）——深入剖析动态代理--从静态代理到动态代理的演化
静态代理 如上图,在程序执行之前.程序猿就要编写Proxy.然后进行编译,即在程序执行之前,代理类的字节码文件就已经生成了(Proxy类的class文件已经存在了). 静态代理尽管在增强现有的接口业务 ...
- Java中的equals()和hashCode()
概述 在我们使用类集框架(比方使用hashMap.hashSet)的时候,常常会涉及到重写equals()和hashCode()这两个方法. 这两个方法的联系是: 1. 假设两个对象不同,那么他们的h ...
- 每日一支TED——弗兰斯·兰庭：为动物发声的摄影作品——2015年6月3日
今天是听TED的第11天,从今天開始简单写一下听TED的感受! 刚把得! 弗兰斯·兰庭从一个部落得到一个思想说:全部的动物都是一样的.虽然他们的外形不一样.可是内在确实一样的,他们在外面伪装,可是他们 ...
- tiny4412 裸机程序 八、重定位到DRAM及LCD实验【转】
本文转载自:http://blog.csdn.net/eshing/article/details/37407423 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 一 ...
- Codeforces--633D--Fibonacci-ish （map+去重）（twice）
Fibonacci-ish Time Limit: 3000MS Memory Limit: 524288KB 64bit IO Format: %I64d & %I64u Su ...
- bzoj 1822 冷冻波
题目大意: 在游戏中,巫妖是一种强大的英雄,它的技能Frozen Nova每次可以杀死一个小精灵 我们认为,巫妖和小精灵都可以看成是平面上的点. 当巫妖和小精灵之间的直线距离不超过R,且巫妖和小精灵的 ...