美文网首页我爱编程
Angular 4.0 and JS全屏 最大化展示

Angular 4.0 and JS全屏 最大化展示

作者: 爱尔兰的男孩 | 来源:发表于2018-03-18 16:54 被阅读367次

    前言 :全屏展示 不是我们经常说的 高度 100%,宽度100%;然后在加一个固定定位,

    其实这是错误的,并不是真正的全屏,大家都看多视频吧!很多视频播放器都有全屏效果,你可以去试试 这种效果是不是和你的不一样,下面言归正传!,

    我主要介绍  angular 的全屏和 JS中的全屏实现,我们一起看代码吧!

    Angular 4.0 实现全屏 

    1.0 在typescript 的控制器中引入依赖 我的依赖如图

    import {Component, ElementRef, OnInit}from '@angular/core';

    2.0 控制器 继承 ElementRef 这个类,用于获取DOM元素

    因为在angular 的框架中获取DOM元素必需 依赖这个类 ,来自于angular的核心模块.

    其他类 根据需要引入

    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,内定义方法

    showAllTemplate(){

    //显示全屏

      this.showALL =true;

    //获取要展示全屏的元素

      let fullscreenDiv =document.getElementById("showAll");

    let fullscreenFunc =fullscreenDiv.requestFullscreen;

    // 设定docuement 的参数

      if (!fullscreenFunc) {

    ['mozRequestFullScreen',

    'msRequestFullscreen',

    'webkitRequestFullScreen'].forEach(function (req) {

    fullscreenFunc =fullscreenFunc ||fullscreenDiv[req];

    });

    }

    //把全屏展示的内容 通过call 改变this指向

      fullscreenFunc.call(fullscreenDiv);

    }

    js 版本 实现全屏 

    代码如下 :  解释 如上

    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);

    来试试你的第一个全屏  demo 吧 !!!

    相关文章

      网友评论

        本文标题:Angular 4.0 and JS全屏 最大化展示

        本文链接:https://www.haomeiwen.com/subject/apgeqftx.html