angular4 鼠標滾動時縮放圖像？

Question

我有一段代碼可以放大/縮小鼠標滾動，如下所示

 <!DOCTYPE html> <html> <body> <script src='https://www.cssscript.com/demo/image-zoom-pan-mouse-interactions-zoomnpan/zoomnpan.js'></script> <style> #demo { width: 460px; height: 250px; background-image: url(https://unsplash.it/3000/2000/?random); background-repeat: no-repeat; background-position: 50% 50%; } </style> <div id="demo"> </div> <script> var p; function enable(){ p = new ZoomNPan(demo); p.minScale = 100; } enable(); </script> </body> </html>

我在 angular 中搜索相同的功能。 我有動態生成的圖像，我想在鼠標滾動時放大/縮小。

有沒有與上面代碼類似的庫？

Answer 1

這將是一個示例，希望它能為您提供一些正確方向的信息。

您可以做的是捕捉鼠標離開的事件並在 html 中輸入：

(mouseleave)=mouseLeave(yourLinkedID)
(mouseenter)=mouseEnter(yourLinkedID)

現在您知道您的鼠標是否在圖片內或不在圖片內。 接下來您要捕獲滾動事件。

(scroll)="onScroll($event)"

現在最后一個技巧是對我們 ngStyle 來說：

[ngStyle]="{'background-size': backgroundSize}"

在您的組件中，輸入會將值設置為 true，將 leave 設置為 false：

onScroll(_ev: any) {
  if(this.entered){
    //do something with event
    //if scroll up this.backgroundSize 50% +5
    //if scroll down this.backgroundSize 50% -5
  }
}

Answer 2

如果該腳本適合您，您可以使用它而不是尋找其他一些支持 Angular 的框架。

使用它：

下載你想要的腳本，把它放在你的資產文件夾中或者基本上你想要它停留的地方
轉到您的angular-cli.json或有時angular.json 。 並將您剛剛下載的腳本添加到腳本數組中，如下所示：
```
 "scripts": [ "../node_modules/jquery/dist/jquery.js", "../src/assets/js/core/jquery.perfect-scrollbar.min.js" ],
```
在這里我添加了Jquery和一個Jquery plugin 。
在您的角度.ts組件文件中添加：
declare var ZoomNPan:any; 在你的@component標簽之上。
使用您的ZoomNPan ，就像您在 vanilla javascript 中一樣（就像在您的演示中一樣）

注意：您可以使用此方法添加所有類型的腳本。

angular4 鼠標滾動時縮放圖像？

問題描述

2 個解決方案

解決方案1
1 2018-09-06 13:59:13

解決方案2
0 2018-09-06 13:02:51

angular4 鼠標滾動時縮放圖像？

問題描述

2 個解決方案

解決方案1 1 2018-09-06 13:59:13

解決方案2 0 2018-09-06 13:02:51

解決方案1
1 2018-09-06 13:59:13

解決方案2
0 2018-09-06 13:02:51