前言 ：全屏展示?不是我們經(jīng)常說的?高度 100%是目，寬度100%妹萨；然后在加一個(gè)固定定位年枕，
其實(shí)這是錯(cuò)誤的，并不是真正的全屏乎完，大家都看多視頻吧熏兄！很多視頻播放器都有全屏效果，你可以去試試?這種效果是不是和你的不一樣，下面言歸正傳摩桶！桥状，
我主要介紹? angular 的全屏和 JS中的全屏實(shí)現(xiàn)，我們一起看代碼吧典格！
Angular 4.0 實(shí)現(xiàn)全屏?
1.0 在typescript?的控制器中引入依賴?我的依賴如圖
import {Component, ElementRef, OnInit}from '@angular/core';
2.0 控制器?繼承 ElementRef?這個(gè)類岛宦，用于獲取DOM元素
因?yàn)樵赼ngular?的框架中獲取DOM元素必需?依賴這個(gè)類 ，來自于angular的核心模塊.
其他類?根據(jù)需要引入
constructor(private route :ActivatedRoute,
private router: Router,
private service:CarPlanService,
private http: Http,
private el: ElementRef,
private confirmationService: ConfirmationService,
private permissionCodeService: PermissionCodeService
) { }
3.0?給按鈕添加方法? ?太簡單了?沒有截圖
<button type="button" id="btnId" class="btn sbss" style="float:right;margin-left:15px;" (click)="showAllTemplate()">全屏展示< button>
4.0?在ts,內(nèi)定義方法
showAllTemplate(){
//顯示全屏
? this.showALL =true;
//獲取要展示全屏的元素
? let fullscreenDiv =document.getElementById("showAll");
let fullscreenFunc =fullscreenDiv.requestFullscreen;
// 設(shè)定docuement 的參數(shù)
? if (!fullscreenFunc) {
['mozRequestFullScreen',
'msRequestFullscreen',
'webkitRequestFullScreen'].forEach(function (req) {
fullscreenFunc =fullscreenFunc ||fullscreenDiv[req];
});
}
//把全屏展示的內(nèi)容 通過call 改變this指向
? fullscreenFunc.call(fullscreenDiv);
}
js?版本 實(shí)現(xiàn)全屏?
代碼如下 :? 解釋?如上
HTML:如下直接粘貼
<div id="fullscreen">
<h1>:fullscreen Demo<h1>
<p>This text will become big and red when the browser is in fullscreen mode.</p>
<button id="fullscreen-button">Enter Fullscreen<button>
</div>
css ：:如下直接粘貼
#fullscreen:-moz-full-screen {
padding: 42px;
background-color: pink;
border: 2px solid #f00;
font-size: 200%;
}
#fullscreen:-webkit-full-screen {
padding: 42px;
background-color: pink;
border: 2px solid #f00;
font-size: 200%;
}
? #fullscreen:-moz-full-screen > h1 {
color: red;
}
#fullscreen:-webkit-full-screen > h1 {
color: red;
}
? #fullscreen:-moz-full-screen > p {
color: darkred;
}
#fullscreen:-webkit-full-screen > p {
color: darkred;
}
? #fullscreen:-moz-full-screen > button {
display: none;
}
#fullscreen:-webkit-full-screen > button {
display: none;
} #fullscreen:fullscreen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
? #fullscreen:fullscreen > h1 {
color: red;
}
? #fullscreen:fullscreen > p {
color: darkred;
}
? #fullscreen:fullscreen > button {
display: none;
}
js :如下直接粘貼
var fullscreenButton = document.getElementById("fullscreen-button");
var fullscreenDiv = document.getElementById("fullscreen");
var fullscreenFunc = fullscreenDiv.requestFullscreen;
? if (!fullscreenFunc) {
['mozRequestFullScreen',
'msRequestFullscreen',
'webkitRequestFullScreen'].forEach(function (req) {
fullscreenFunc = fullscreenFunc || fullscreenDiv[req];
});
}
? function enterFullscreen() {
fullscreenFunc.call(fullscreenDiv);
}
? fullscreenButton.addEventListener('click', enterFullscreen);
來試試你的第一個(gè)全屏? demo?吧 Ｋ＝伞！挽霉！
