什么决定了Jquery中弹出的图像的边际变化量

Question

在stackoverflow的另一个问题： on Hover Image zoom

它们会告诉您如何在悬停时弹出图像。答案在这个jsfiddle中给出：http://jsfiddle.net/uCtHh/1/

在代码中，图片大小为50px，并在悬停时更改为100px。 然而，悬停时给出的负余量仅为-20px。

不应该是-50像素，因为图像的大小会增加50？

Answer 1

您可以尝试查看将边距更改为-50px时会发生什么。

当左边距变为-50像素时，右图的大部分将位于左边的上方。左边距确定图片与页面左侧或左侧项目之间的距离。因此，如果您不希望图片位于左侧图片上方，您甚至可以将其设置为10px。

Answer 2

基本上，无论是谁写过jsfiddle都希望它看起来像是从中间扩展出来的。直观地说，这意味着左边距和上边距应为-25px。这是因为每个维度增长50px，但是你希望它从中心平均扩展，所以每一边应该是距离它开始的距离更远的尺寸增长绝对量的一半（即25px）。

在jsfiddle中它是-20px的原因是因为图像边距已经是5px。

Answer 3

假设您的页面宽度为700px。图像宽度为100px（比方说）。 页面的中点为350px，图像的中点为50px。 现在要有你的右边距，以便你的图像在中间？ 计算

• * 页面宽度：350 * *位于中间*
• * imagewidth 50 * *为中* * / / li>
• 此50 px计入保证金的两边
• 因为您的页面有350像素而图像有25像素。 Substract pagewidth-imageWidth，即** 350-25将是您的保证金

---

我的回答看起来很笨，我很抱歉。它看起来很简单但很棘手。

**

Answer 4

当悬停时，图像将向左扩展25px（边距从+ 5px变为-20px）和向右扩展25px（由于图像的大小：100px新图像大小 - 50px旧图像大小 - 25px左余量）。由于图像已经向左和向右均匀扩展，因此它将看起来居中。

如果你把-50px放在另一方面，那么它将向左消耗55px，向右消耗-5px，所以看起来它已经向左移动 - 这不是请求行为。