如何切换全屏上点击

Question

import { Component, OnInit, ElementRef } from '@angular/core'; 
 
declare var JQuery : any; 
 

 
@Component({ 
 
    selector: 'app-presentation', 
 
    templateUrl: './presentation.component.html', 
 
    styleUrls: ['./presentation.component.scss'] 
 
}) 
 
export class PresentationComponent implements OnInit { 
 

 
    public count=0; 
 
    public imgUrl ='http://192.168.1.90:8080/pdf/temp'; 
 

 
    constructor(public _eleRef : ElementRef) { 
 
    this.count=0 
 
    this.imgUrl='http://192.168.1.90:8080/pdf/temp'+this.count+".jpg" 
 
    } 
 

 
    ngOnInit() { 
 
    jQuery(this._eleRef.nativeElement).find('#Fullscreen').on('click',function(){ 
 
     jQuery('#exampleImage').width(jQuery(window).width()); 
 
     jQuery('#exampleImage').height(jQuery(window).height()); 
 
    }); 
 
    } 
 

 
    back(){this.count--; 
 
    if(this.count>=0 && this.count<13){ 
 
    
 
    this.imgUrl='http://192.168.1.90:8080/pdf/temp'+this.count+".jpg" 
 
    // this.imgUrl = 'http://wallpaperdj.com/wallpapers/like_leaves_in_the_wind-1600x900.jpg'; 
 
    } 
 
    else{ 
 
     this.count++; 
 
    } 
 
    } 
 

 
    next(){this.count++; 
 
    if(this.count>=0 && this.count<13){ 
 
    
 
    this.imgUrl='http://192.168.1.90:8080/pdf/temp'+this.count+".jpg" 
 
    } 
 
    else{ 
 
     this.count--; 
 
    } 
 
    } 
 

 
}

.slide-control { 
 
    z-index: 5; 
 
    background-color: #323232; 
 
    overflow: hidden; 
 
    border: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    color: #fff; 
 
    font-size: 13px; 
 
    max-height: 56px; 
 
    min-height: 50px; 
 
    ///text-align: center; 
 
} 
 

 
.control { 
 
    font-size: 20px; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
} 
 

 
.slide-control #fullscreen { 
 
    float: right !important; 
 
} 
 

 
.imageArea { 
 
    background-color: #e5e5e5; 
 
    border: 1px inset #323232; 
 
}

<div class="row imageArea"> 
 
    <div class="mx-auto"> 
 
     <img [src]="imgUrl" id="exampleImage" class="img-fluid" alt="Responsive image"> 
 
    </div> 
 
    <div class="slide-control form-inline"> 
 
     <div class="mx-auto"> 
 
      <span class="control" (click)="back(count)"><i class="fa fa-arrow-left" aria-hidden="true"></i></span> 
 
      <span>{{count+1}}/13</span> 
 
      <span class="control" (click)="next(count)"><i class="fa fa-arrow-right" aria-hidden="true"></i></span> 
 
     </div> 
 
     <div class="fullscreen float-right"> 
 
      <span class="control" id="Fullscreen"><i class="fa fa-arrows-alt text-right" aria-hidden="true"></i></span> 
 
     </div> 
 
    </div> 
 
</div>

你好，我是设计采用了棱角分明2.我有一个全屏按钮，我自己的演示文稿查看器时，我那个按钮点击放大我的形象等于我的容器div大小。但我想让这个按钮切换。这意味着当我再次单击该按钮时，它应该在页面加载时（缩放大小之前）显示缩放图像作为其信号大小。

Answer 1

试试这个

function toggleFullScreen() { 
    if (!document.fullscreenElement && 
     !document.mozFullScreenElement && 
     !document.webkitFullscreenElement && 
     !document.msFullscreenElement 
) { 
    if (document.documentElement.requestFullscreen) { 
     document.documentElement.requestFullscreen(); 
    } else if (document.documentElement.msRequestFullscreen) { 
     document.documentElement.msRequestFullscreen(); 
    } else if (document.documentElement.mozRequestFullScreen) { 
     document.documentElement.mozRequestFullScreen(); 
    } else if (document.documentElement.webkitRequestFullscreen) { 
     document.documentElement.webkitRequestFullscreen(); 
    } 
    } else { 
    if (document.exitFullscreen) { 
     document.exitFullscreen(); 
    } else if (document.msExitFullscreen) { 
     document.msExitFullscreen(); 
    } else if (document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); 
    } else if (document.webkitExitFullscreen) { 
     document.webkitExitFullscreen(); 
    } 
    } 
}