如何解决如何使用Angular 9中的ngx-image-zoom在悬停时的图像旁边显示图像缩放弹出窗口?
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。