-1
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大小。但我想讓這個按鈕切換。這意味着當我再次單擊該按鈕時,它應該在頁面加載時(縮放大小之前)顯示縮放圖像作爲其信號大小。
不好的做法,結合'jQuery'用'Angular' –
我怎麼能做到這一點有角2 –