使用jQuery在div中展开/缩小图像 [英] Expand/shrink image in a div with JQuery

问题描述

我在网站上使用一些图像作为横幅.它们的宽度为(960px)，我最初将图像的一部分显示为预告片(例如160px高).我现在通过使用一个单独的图像来完成此操作，该图像是完整尺寸图像的一部分(高度为600px).使这个问题复杂化的是我在Photoshop中应用的阴影，它们在图像的顶部和底部使它看起来像插入"到div中.

I'm using some images as banners on my site. They're full (960px) width and I initially show a portion of the image as a teaser (say 160px high). I do this now by using a separate image which is a slice of the full size image (which is 600px high). Complicating this are shadows that I apply in Photoshop at the top and bottom of the image that make it look "inset" into the div.

我想做的是在图像上覆盖一个小图标，上面写着查看更多".当访问者单击此图标时，我想div展开(装饰风格)以显示整个图像，然后将图标更改为少看".单击新图标后，我希望图像折叠到其原始大小.

What I would like to do is overlay the image with a small icon that says something like "see more". When the visitor clicks on this icon I'd like to div to expand (acordian style) to show the whole image and then change the icon to "see less". When the new icon is clicked I'd like the image to collapse to its original size.

我怀疑我需要使用新的图像(960 x 600px)，并且还添加了阴影，以便可以零售插图.因此，这需要两张图片，一张在div扩展和收缩时交换掉，另一张在div收缩到原始160px高度时交换掉.

I suspect that I will need to use a new image (960 x 600px) that I've also added shadows to so I can retail the inset look. So, this requires two images, one that is swapped out when the div is expanding and contracting and one that is swapped in when the div contracts to the original 160px height.

这很复杂，因为该图像在页面顶部附近起横幅的作用，我不希望div向上扩展超过窗口顶部，以便在屏幕外消失并可能添加滚动条.最后的麻烦是，可以在原始600px图像的任何高度拍摄小切片".我选择图像中看起来最适合160px的区域.因此，div扩展的高度不是恒定的.如果从原始图像的顶部剪切切片，则div将仅在顶部扩展一点，在底部扩展更多.从原始图像的底部切下的切片也是如此.

Complicating this is the fact that the image acts as a banner near the top of the page and I don't want the div to expand upwards past the window top so as to disappear off-screen and possibly add a scrollbar. A final complication is that the small "slice" can be taken at any height in the original 600px image. I select an area of the image that looks best at 160px. So, the div expansion is not constant in height. If the slice is cut from the top of the original image, the div will only expand a bit at the top and much more at the bottom. Similarly with slices cut from the bottom of the original image.

我意识到这是一个复杂的问题，我在Google周围寻找了很多解决方案.我发现了一些看起来可能有用的JQuery扩展(UI和工具)，但是我找不到我正在尝试做的事的示例.如果答案太复杂而无法在此论坛中尝试，那么不胜感激指向那些执行我要完成的任务的站点.

I realize this is a complicated question, and I did Google around quite a bit looking for solutions. I found a couple of JQuery extensions (UI and Tools) that look like they might be usable, but I could find no examples of what I'm trying to do. If the answer is too complicated to attempt in this forum, pointers to sites that do what I'm trying to accomplish would be appreciated.

推荐答案

我将一些jQuery代码放在一起，并提出了以下内容:

I threw some jQuery code together and came up with this:

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

这是您要找的东西吗?如果是这样，请随时为您自己的目的复制它.它可以用作jQuery插件，因此只需从此处复制插件代码.使用方法如下:

Is this what you were looking for? If it is, feel free to copy it for your own purposes. It works as a jQuery plugin, so just copy the plugin code from here. Here's how to use it:

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.

The rel attribute houses the cut position (margin) of the cropped image. If you cropped the image so that it the cropped region starts 300px from the top, put -300 here. If the crop was from top of the image, put 0 here and so on. It defaults to -220, which is (600 - 160) / 2.

希望这会有所帮助.

这篇关于使用jQuery在div中展开/缩小图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！