角度图像缩放悬停效果

Question

我在angular是个新手。你能告诉我在电商产品图像中使用哪种缩放悬停效果吗？

我也尝试过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

这里的

是working Example

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之外，还没有能正常工作的npm包用于角度图像缩放。这是有效的DEMO。

安装：

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>

这种类似于亚马逊或W3school的图像缩放将为您工作。

我希望这能解决你的问题。