要实现Angular中的图片放大悬停效果,你可以使用Angular的指令(Directive)来实现。以下是一个实现示例:
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
@Directive({
selector: '[appImageZoom]'
})
export class ImageZoomDirective {
constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
@HostListener('mouseenter')
onMouseEnter() {
this.zoomIn();
}
@HostListener('mouseleave')
onMouseLeave() {
this.zoomOut();
}
private zoomIn() {
this.renderer.setStyle(this.elementRef.nativeElement, 'transform', 'scale(1.2)');
this.renderer.setStyle(this.elementRef.nativeElement, 'transition', 'transform 0.3s ease');
}
private zoomOut() {
this.renderer.setStyle(this.elementRef.nativeElement, 'transform', 'scale(1)');
this.renderer.setStyle(this.elementRef.nativeElement, 'transition', 'transform 0.3s ease');
}
}
appImageZoom
属性,如下所示:
import { ImageZoomDirective } from './image-zoom.directive';
@NgModule({
declarations: [
ImageZoomDirective
],
// ...
})
export class AppModule { }
现在,当鼠标悬停在图片上时,图片将会放大,鼠标离开时图片将会恢复原始大小。你可以根据需要调整放大的比例和过渡时间。
上一篇:Angular图片404错误