Javascript模态图像缩放

Question

我有一个图像模式。像 facebook 这样的东西在 Messenger 中有用于显示图像。我想添加放大和缩小按钮 - 类似于 pdf 查看器？在 gmail 上？已。我如何使用 javascript 使用按钮放大和缩小图像？

Answer 1

取决于您想如何缩放它。您可以通过修改 img 标签的 width 和 height 来缩放它。如果这不是一个选项，例如您的模态框有固定大小，那么您可以更改 transform 属性。你想扩展它。由于这是一个 CSS 属性，让我们看一个基于此扩展思想的 CSS 规则示例：

HTML:

<div class="item">
  <img src="http://someurl/0v15321t3W1a/pepsi.jpg" alt="pepsi" width="540" height="548">

  <div class="item-overlay top"></div>
</div>

CSS:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.item {
  position: relative;

  border: 1px solid #333;
  margin: 2%;
  overflow: hidden;
  width: 540px;
}
.item img {
  max-width: 100%;

  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.item:hover img {
  -moz-transform: scale(1.4);
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
}

取自here。请注意，可以使用给定标签的 style 属性在 Javascript 中修改 CSS 属性。

Javascript模态图像缩放

Javascript modal image zoom

javascript

zooming