我在网站上使用了一些图片作为横幅。它们是完整的（960px）宽度，我最初显示图像的一部分作为预告片（比如160px高）。我现在通过使用单独的图像来做到这一点，图像是全尺寸图像的切片（高600像素）。更复杂的是我在Photoshop中应用于图像顶部和底部的阴影，使其看起来像是“嵌入”div。
我想要做的是用一个小图标覆盖图像，上面写着“看到更多”。当访问者点击此图标时，我想将div展开（acordian样式）以显示整个图像，然后将图标更改为“see less”。单击新图标时，我希望图像折叠到原始大小。
我怀疑我需要使用新图像（960 x 600px），我还添加了阴影，以便我可以零售插图。因此，这需要两个图像，一个在div扩展和收缩时被换出，另一个在div收缩到原始的160px高度时被交换。
这使得图像在页面顶部附近充当横幅并且我不希望div向上扩展到窗口顶部以便在屏幕外消失并且可能添加滚动条。最后的复杂因素是可以在原始600px图像中的任何高度拍摄小的“切片”。我选择的图像区域最适合160px。因此，div扩展的高度不是恒定的。如果从原始图像的顶部切割切片，则div将仅在顶部扩展一点，在底部扩展更多。同样，从原始图像的底部切下切片。
我意识到这是一个复杂的问题，我在谷歌周围寻找解决方案。我发现了几个看起来可能有用的JQuery扩展（UI和工具），但我找不到我想要做的事情的例子。如果答案太复杂而无法在此论坛中尝试，那么指向我正在尝试完成的网站的指针将不胜感激。
答案 0 :(得分：2)
我把一些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。
希望这有帮助。