几天以来我一直在尝试（和搜索），但没有得到我的想法......
我使用羽毛灯箱来显示 HTML 内容（带有一些图像的文本）。因为有些照片很小，我想对它们进行图像缩放。
这里的缩放示例：jquery.elevatezoom.js #6:inner-zoom
elevatezoom.js在灯箱外运行良好，但不幸的是在灯箱内不行。有没有人一起工作？还是我需要另一个javascript（？）我尝试了几个..感谢您的帮助！
问问题
750 次
1 回答
0
问题似乎在于 ElevateZoom 插件计算图像位置和尺寸的方式。
如果您确实尝试将图片放入 featherlight 隐藏 div 中，您会看到 ElevateZoom 确实创建了一个 zoomContainer 并且一切正常，除了这是它生成的 css：
left: 0px;
top: 0px;
height: 0px;
width: 0px;
这似乎发生了，因为当你调用$('#image_element').offset()它时{top:0,left:0}我假设它返回，因为当它在羽毛灯容器内时，它的位置是fixed.
如果您还没有找到另一个图像缩放库，我认为解决这个问题的最简单方法就是自己制作这个效果。您可以在羽化灯容器中简单地有两个 div，一个隐藏包含较大的图片，一个较小的包含正常图片。当鼠标进入图片时，您隐藏小并显示大。那将是第一步。
第二步是让它滚动。elevateZoom 处理此问题的方法是将 设置为大图像，然后使用属性background-image移动它。background-position以下是 elevateZoom 生成的示例：
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; width: 411px; height: 274px; float: left; cursor: crosshair; position: absolute; top: 0px; left: 0px; display: block; opacity: 0; background-image: url("images/large/image1.jpg"); background-position: -152.651px -545.577px; background-repeat: no-repeat;" class="zoomWindow"> </div>
注意background-image和background-repeat。当光标相对于图像所在的位置移动时，您可以使用 Javascript 移动它。
我希望这有帮助！
于 2016-08-14T21:19:30.770 回答