使用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。

希望这会有所帮助。