在不影響其他元素的情況下動態改變對象的大小

我明白標題可能有點混亂（我不知道該怎麼提問），所以這裏是我正在處理的示例。在不影響其他元素的情況下動態改變對象的大小

http://beautifulcreationphotography.net/gallery.html

所以我的問題是，當你將鼠標懸停在圖片外，其他圖片時將圖像放大走動。一種可能的解決方案是使用絕對定位，但手動將所有圖像放置在網格中是一件很麻煩的事（我正在將它變成3列寬的網格）。

什麼是有助於此的其他解決方案？我對純JavaScript解決方案以及使用JS庫都是開放的。

JS：

CSS：

#gallery { 
    display:inline; 
    margin:50px; 
    height:300px; 
} 

#gallery img { 
    position:relative; 
    width:200px; 
    margin:30px; 
}

來源

2012-06-06 Capt.Redbeard

使用JavaScript框架沒有考慮過，像jQuery？

您可能要檢查這個網站：http://codecanyon.net/item/image-effects-pack-jquery-powered/full_screen_preview/136861?ref=lvraa&ref=lvraa&clickthrough_id=60503324&redirect_back=true

滾動縮放效果，你會發現你在找什麼。

來源

2012-06-06 02:21:34 JudeJitsu

雖然這是我正在尋找的，我寧願它是免費和開源的。不過謝謝你的建議。我還會更密切地瀏覽jQuery庫，以查找適合我的情況的東西。如果還有其他解決方案，請繼續發佈。 –

簡單。給每個圖像一個不同的z-索引！這樣他們都在不同的飛機...

你可以用JavaScript/DHTML方法做到這一點。如果您將圖像編號爲數組，則可以輕鬆遍歷圖像，併爲每個圖像分配增加的z-索引。

來源

2012-06-06 02:55:53 Wagtail

我剛試過這個，但沒有奏效。我更新了上面鏈接的頁面，所以如果你不介意看看代碼，並確保我沒有做錯任何事情。謝謝你的幫助！ –

把圖像放在桌子上怎麼樣？給每個單元格33.3％的寬度，並給圖像的初始寬度，如70％，並將鼠標懸停擴展到100％？ – Wagtail

從我的理解中，使用表格來格式化是糟糕的編程。我都是爲了做最簡單的事情，但是我想避免使用表格，因爲維護它更加困難。 –

在不影響其他元素的情況下動態改變對象的大小

回答

相關問題