如何使用Angular 9中的ngx-image-zoom在悬停时的图像旁边显示图像缩放弹出窗口？

编程问答 2022-12-07

问题描述

image-zoom用于在鼠标悬停时缩放产品图像，但是我希望当用户将鼠标悬停在该图像上时，像在亚马逊上一样，显示缩放图像的div会在图像旁边弹出。我无法理解如何使用ngx-image-zoom做到这一点。

app.html 

  <h1>
    {{title}}
  </h1>
  <lib-ngx-image-zoom
      [thumbImage]=myThumbnail
      [fullImage]=myFullresImage
   ></lib-ngx-image-zoom>

app.ts 

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

或者我可以使用其他任何插件或库轻松实现此目的吗？

解决方法

您是否已按照该库的npm页面的指示将NgxImageZoomModule导入了模块中？

,

尝试使用 ng-img-magnifier npm package。这是一个有效的 DEMO。非常容易实施且完全可定制。

<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>
angular9htmljavascriptngx-bootstrap