使用JQuery在div中展开/缩小图像
我在我的网站上使用了一些图片作为横幅。 它们全宽（960像素），我最初显示图像的一部分作为传情（比如160像素高）。 我现在通过使用一个单独的图像，这是一个全尺寸的图像（这是600px高）的一部分。 复杂的是我在Photoshop中应用的图像顶部和底部的阴影，使它看起来像插入div。
我想要做的是用一个小图标覆盖图像，这个图标上写着“see more”。 当访客点击此图标时，我想要展开（acordian风格）以显示整个图像，然后将图标更改为“看不到”。 当点击新图标时，我想让图像折叠为原始大小。
我怀疑我需要使用一个新的图像（960 x 600像素），我还添加了阴影，以便我可以零售插图的外观。 因此，这需要两个图像，一个在div扩展和缩小时换出，另一个在div收缩到原始160px高度时交换。
复杂的是，图像充当页面顶部的横幅，并且我不希望div向上展开超过窗口顶部，以便在屏幕外消失并且可能添加滚动条。 最后的一个复杂情况是，在原始的600像素图像中，可以在任何高度拍摄小“切片”。 我选择了160像素最好的图像区域。 所以，div的膨胀并不是一成不变的。 如果切片从原始图像的顶部切下，则div只会在顶部扩展一点，而在底部会扩展得更多。 类似于从原始图像的底部切下的切片。
我意识到这是一个复杂的问题，我在谷歌周围寻找解决方案。 我发现了几个JQuery扩展（UI和工具），看起来他们可能是可用的，但我没有找到我想要做的事情的例子。 如果答案太复杂，无法在此论坛中尝试，那么可以点击我想要完成的工作的网站。
我将一些jQuery代码放在一起，并提出了这个问题：
http://www.ulmanen.fi/stuff/thumb/index.html
这是你在找什么？ 如果是这样，请随意复制它以达到自己的目的。 它作为一个jQuery插件，所以只需从这里复制插件代码。 以下是如何使用它：
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 。
希望这可以帮助。
链接地址: http://www.djcxy.com/p/78167.html