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

如果该脚本适合您，则可以使用它代替寻找其他有角度的框架。

使用它：

下载所需的脚本，将其放在资产文件夹中，或者基本上将其保留在其中
转到您的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就像在使用普通javascript一样（就像在您的演示中一样）

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

Answer 2

这将是一个示例，希望它能为您提供正确方向的一些信息。

您可以做的是捕捉鼠标离开的事件并在html中输入：

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

现在，您知道鼠标是否位于图片中。接下来，您要捕获滚动事件。

(scroll)="onScroll($event)"

现在最后一个窍门是给我们ngStyle一样：

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

在您的组件中，enter会将值设置为true，而将假设置为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
  }
}

在angular4中用鼠标滚动缩放图像？

2 个答案: