使用jQuery在div中展開/縮小圖像

Question

我在我的網站上使用了一些圖像作爲橫幅。它們全寬（960像素），我最初顯示圖像的一部分作爲傳情（比如160像素高）。我現在通過使用一個單獨的圖像，這是一個全尺寸的圖像（這是600px高）的一部分。複雜的是我在Photoshop中應用的圖像頂部和底部的陰影，使它看起來像插入div。

我想要做的是用一個小圖標覆蓋圖像，上面寫着「see more」。當訪客點擊此圖標時，我想要展開（acordian風格）以顯示整個圖像，然後將圖標更改爲「看不到」。當點擊新圖標時，我想讓圖像摺疊爲原始大小。

我懷疑我需要使用一個新的圖像（960 x 600像素），我也添加了陰影，以便我可以零售插圖的外觀。因此，這需要兩個圖像，一個在div擴展和縮小時換出，另一個在div收縮到原始160px高度時交換。

使事情變得複雜的是，圖像充當頁面頂部的橫幅，並且我不希望div向上展開超過窗口頂部，以便在屏幕外消失並且可能添加滾動條。最後的一個複雜情況是，在原始的600像素圖像中，可以在任何高度拍攝小「切片」。我選擇了160像素最好的圖像區域。所以，div的膨脹並不是一成不變的。如果切片從原始圖像的頂部切下，則div只會在頂部擴展一點，而在底部會擴展得更多。類似於從原始圖像的底部切下的切片。

我意識到這是一個複雜的問題，我在谷歌周圍尋找解決方案。我發現了幾個JQuery擴展（UI和工具），看起來他們可能是可用的，但我沒有找到我想要做的事情的例子。如果答案太複雜，無法在此論壇中嘗試，那麼可以點擊我想要完成的工作的網站。

Answer 1

我一起扔了一些jQuery代碼以及與此想出了：

http://www.ulmanen.fi/stuff/thumb/index.html

難道這就是你要找的人？如果是這樣，請隨意複製它以達到自己的目的。它用作jQuery插件，因此只需複製here的插件代碼即可。以下是如何使用它：

HTML：

<a class="slidethumb" href="960_x_600_image.jpg" rel="MARGIN"><img src="960_x_160_image.jpg" /></a> 

的jQuery：

$(function() { 
    $('a.slidethumb').slideThumb(); 
}); 

rel屬性安置裁剪圖像的切割位置（保證金）。如果您裁剪圖像以使裁剪區域從頂部開始300px，請在此處放置-300。如果作物來自圖像的頂部，則將0置於此處等等。它默認爲-220，即(600 - 160)/2。

希望這會有所幫助。