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
- 閱讀 ( 841 )
- 分類：電腦網絡
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章