使用JQuery在div中展开/缩小图像
我在我的网站上使用一些图像作为横幅。 它们是完整的（960px）宽度，我最初显示图像的一部分作为预告片（比如160px高）。 我现在通过使用单独的图像来做到这一点，图像是全尺寸图像的切片（高600像素）。 更复杂的是我在Photoshop中应用于图像顶部和底部的阴影，使其看起来像“插入”div。
我想做的是用一个小图标覆盖图像，上面写着“看得更多”。 当访问者点击此图标时，我想将div展开（acordian样式）以显示整个图像，然后将图标更改为“see less”。 单击新图标时，我希望图像折叠到原始大小。
我怀疑我需要使用一个新的图像（960 x 600px），我还添加了阴影，这样我就可以将插图看作零售。 因此，这需要两个图像，一个在div扩展和收缩时换出，另一个在div收缩到原始160px高度时交换。
造成这种情况复杂的是，图像充当了页面顶部附近的横幅，我不希望div向上扩展到窗口顶部以便在屏幕外消失并可能添加滚动条。 最后的复杂因素是可以在原始600px图像中的任何高度拍摄小的“切片”。 我选择最适合160px的图像区域。 因此，div扩展的高度不是恒定的。 如果从原始图像的顶部切割切片，则div将仅在顶部扩展一点，在底部扩展更多。 类似地，从原始图像的底部切下切片。
我意识到这是一个复杂的问题，我在谷歌周围寻找解决方案。 我发现了几个看起来可能有用的JQuery扩展（UI和工具），但我找不到我想要做的事情的例子。 如果答案太复杂而无法在此论坛中尝试，那么指向我正在努力完成的网站的指针将不胜感激。
我把一些jQuery代码放在一起，想出了这个：
http://www.ulmanen.fi/stuff/thumb/index.html
这是你在寻找什么？ 如果是，请随意复制它以用于您自己的目的。 它作为一个jQuery插件，所以只需从这里复制插件代码。 以下是如何使用它：
HTML：
jQuery的：
$(function() { $('a.slidethumb').slideThumb(); });
rel属性包含裁剪图像的剪切位置（边距）。 如果您裁剪图像以使裁剪区域从顶部开始300px，请将-300放在此处。 如果裁剪来自图像的顶部，请将此处设为0，依此类推。 默认为-220，即(600 - 160) / 2 。
希望这可以帮助。