HTML5怎样实现全屏
工具/材料
搜狗浏览器
电脑
sublime
操作方法
-
01
首先，先设置一个h3的标签，还有设置一个p标签，并且给它们添加id。
-
02
然后再写一个script标签，注意，script标签要放在body标签的后边哦，这点很重要。
-
03
然后通过id来获取到h3和p标签，并且保存在变量里面。获取id的方法是通过document.getElementById来的，注意大小写哦。
-
04
然后我们给h3绑定一个事件，如图所示，通过addEventListener()来绑定，click表示的是点击事件。
-
05
接着我们再来调用RequestFullScreen()方法，表示全屏，这里我在前面加了webkit表示的是谷歌内核。只要是谷歌内核的浏览器都可以使全屏生效，搜狗浏览器就是谷歌内核。
-
06
接着来预览，如图，只要我们点击“全屏”，那么下面的内容就会全屏显示了哦。
-
07
如图，咪咪我之前点击了“全屏”，所以现在p标签里面的内容就会全屏显示了哦，如果要退出全屏，按Esc键即可。
-
08
为了兼容不同内核的浏览器，我就多写了一些代码，大家也可以多测试一下。
-
09
全屏源代码示例，保存即可查看效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3 id="myh3">全屏</h3>
<p id="myp">
搜狗指南
搜狗指南
搜狗指南
</p>
</body>
<script>
var h3=document.getElementById("myh3");
var p=document.getElementById("myp");
h3.addEventListener("click",function(){
p.webkitRequestFullScreen();
p.msRequestFullScreen();
p.oRequestFullScreen();
p.mozRequestFullScreen();
});
</script>
</html> - End
特别提示
有些小伙伴的谷歌浏览器用不了，那么就用搜狗浏览器吧。
- 发表于 2017-08-29 00:00
- 阅读 ( 863 )
- 分类：电脑网络
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章