时间戳

首页 > 解决方案 > 在angular4中鼠标滚动缩放图像？

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

问题描述

我有一段代码将在鼠标滚动时放大/缩小，如下所示

<!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>

我在角度搜索相同的功能。我有动态生成的图像，我想在鼠标滚动时放大/缩小。

有没有与上面的代码类似的库？

标签： javascriptangular

解决方案

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

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

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

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

(scroll)="onScroll($event)"

现在最后一个技巧是对我们 ngStyle 像：

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

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

推荐阅读