什麼決定的圖像邊緣變化量jQuery中

Question

彈出在計算器的另一個問題： on Hover Image zoom

他們會告訴你怎麼做，當鼠標懸停的圖像彈出。答案在這個jsfiddle中給出：http://jsfiddle.net/uCtHh/1/

在代碼中圖像大小爲50px，並且在盤旋時更改爲100px。 但懸停時給出的負餘量僅爲-20px。

不應該是-50px，因爲圖像的大小增加了50？

Answer 1

基本上誰寫的jsfiddle想讓它看起來像是圖片從中間擴展出來。直觀地說，這意味着左邊距和上邊距應該是-25px。這是因爲每個維度都增長了50px，但是您希望它從中心平均擴展，因此每個維度應該是維度增長絕對量（即25px）的一半，距離它開始的距離更遠。

它在jsfiddle中爲-20px的原因是因爲圖片邊距已經是5px。

Answer 2

當盤旋時，圖像將向左擴展25px（邊距從+ 5px改變爲-20px），向右擴展25px（因爲圖像的大小：100px新圖像大小 - 50px舊圖像大小 - 25px左邊距）。由於圖像已被平等地擴展到左側和右側，它將看起來居中。

另一方面，如果你放了-50px，那麼它將向左花費55px，向右花費5px，因此它看起來像已經移動到左邊 - 這不是所請求的行爲。

Answer 3

您可以嘗試一下，看看將邊距更改爲-50px時會發生什麼。

當剩餘邊距變爲-50像素時，右側圖片的大部分將位於左側。左邊距確定圖片與頁面左側或左側項目之間的距離。所以如果你不希望圖片會在左邊的圖片上方，你甚至可以將它設置爲10px。

Answer 4

假設您的頁面寬度爲700px，並且圖片寬度爲100px（比如說）。 頁面的中點在350px，圖像的中點是50px。 現在有你的右邊距，這樣你的圖像會在中間？ 計算

• * 頁面寬度：350 * *是在中間*
• * imagewidth 50 * *爲中間*
• 這50個像素在邊緣上的兩個側計數
• 因爲你的頁面有350px，圖片有25px。頁寬。減去，imageWidth即** 350-25將是你的保證金

---

我的回答看起來笨重對不起。它看起來很簡單，但它很棘手。

**