Angular 圖像放大 hover 效果

Question

我是 angular 的新手。 你能告訴我哪種縮放 hover 效果適用於電子商務產品圖片嗎？

我也試過 ngx-img-zoom npm 但沒用。

//test.component.html
  <ngx-img-zoom
  [zoomImageSrc]="zoomImageSrc"
  [previewImageSrc]="previewImageSrc" 
  [imgStyle]="'width:515px; height:515px; bottom:0;  left:0;  right:0;  top:0;  margin:0 auto; border:1px solid #dcdcdc;'" 
  [resultStyle]="`width:824px; height:824px; background-repeat: no-repeat; z-index: 2; position:absolute;
                 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
                  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); top: 0;left: 100%;`"
  [lensStyle]="'width:155px; height:155px"
  [enableZoom] = "enableZoom"
  [containerStyle]=""
></ngx-img-zoom>

//test.component.ts
  constructor(private ngxImgZoom: NgxImgZoomService) {
    this.ngxImgZoom.setZoomBreakPoints([{w: 100, h: 100}, {w: 150, h: 150}, {w: 200, h: 200}, {w: 250, h: 250}, {w: 300, h: 300}]);

Answer 1

您可以主動使用

https://www.npmjs.com/package/ngx-image-zoom

    npm i ngx-image-zoom

這是工作示例

Import it to your `App Module`

    import { NgxImageZoomModule } from 'ngx-image-zoom';
    
    @NgModule({
      imports:      [ BrowserModule, FormsModule, NgxImageZoomModule ],
      declarations: [ AppComponent, HelloComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

然后

    <lib-ngx-image-zoom
        [thumbImage]=myThumbnail
        [fullImage]=myFullresImage
        [magnification]="1"
        [enableScrollZoom]="true"
        [enableLens]="true"
        [lensWidth]="200"
    ></lib-ngx-image-zoom>

在.ts文件中聲明圖像

myThumbnail="https://wittlock.github.io/ngx-image-zoom/assets/thumb.jpg";
  myFullresImage="https://wittlock.github.io/ngx-image-zoom/assets/fullres.jpg";

Answer 2

除了 ng-img-magnifier 之外，Angular 圖像縮放沒有正常工作的 npm package。 試試用這個...

安裝：

npm i ng-img-magnifier

執行：

<ng-img-magnifier
[thumbImage]='img' [fullImage]='img2'>
</ng-img-magnifier>

對於鏡頭、縮略圖和縮放自定義，請嘗試：

<ng-img-magnifier [thumbImage]='img' [fullImage]='img2'
[top]='top' [right]='right'
[lensWidth]='lensewidth' [lensHeight]='lensheight'
[resultWidth]='resultWidth' [resultHeight]='resultheight'
[imgWidth]='imgWidth' [imgHeight]='imgheight'> 
</ng-img-magnifier>

這種類似於 Amazon 或 W3school 的圖像縮放將適合您。

我希望這能解決您的問題。