Question

我正在尝试在我的网站上实现类似中型的缩放功能，但遇到一些问题。

首先，我尝试了一个名为Zoom的插件：

当我放大时，图像未居中，而是在顶部具有较大的填充。请参见my Fiddle here .default-image {max-width: 100%; padding-top: 24px; padding-bottom: 24px; margin: 0px auto;}。我要实现的是：缩小时保留这样的填充，但是放大时删除所有填充。
当图像放大并且开始滚动时，图像会立即缩小。我想对此稍作更改，例如，当我滚动超过40像素时，图像将仅返回其原始状态。

然后，我也尝试使用this plugin，但我什至无法做这项工作。

我下载了medium zoom软件包，将medium-zoom.css添加到了我的css文件夹中，并将medium-zoom.js文件添加到了我的js文件夹中。
在HTML头中添加了<link href="css/medium-zoom.css" rel="stylesheet">。
将<script src="js/medium-zoom.js"></script>添加到html文件的底部-</body>上方
添加了具有以下规格的图像：<div class="image-container col-xs-12"> <img class="default-image medium-zoom-image" src="res/images/image-example.png" data-zoomable="true"> </div>
无法单击图像，所以我想我无法正确将插件链接到我的图像。

我将不胜感激。

Answer 1

我选择了第二个，因为它似乎比第一个更新了。您的问题是您还必须初始化该插件调用，例如：

mediumZoom('.zoom-image', {
    margin: 24,
    background: '#ffffff',
    scrollOffset: 40 /* The number of pixels to scroll to close the zoom = > Your 40px */
})

该插件还有另一个选项，您可以在文档页面中找到（您也可以看到）：https://github.com/francoischalifour/medium-zoom

这是运行中的代码：

mediumZoom('.zoom-image', {
  margin: 24,
  background: '#ffffff',
  scrollOffset: 40
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.2/dist/medium-zoom.min.js"></script>
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div class="image-container col-xs-12">
<img class="zoom-image" src="http://fat.github.io/zoom.js/img/palm.jpg" width="200px" data-zoom-src="http://fat.github.io/zoom.js/img/palm.jpg" alt="My image">
</div>

<p class="label">Image label text</p>

<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

图像的Medium.com样式缩放

1 个答案: