单击时使用jquery更改图像的css属性

时间:2011-06-15 03:19:23

标签: jquery thumbnails

所以我是这个整个javascript的初学者,这可能是一个非常初学的问题。我一直在寻找答案,甚至尝试修改一些基本手风琴的源代码,但它永远不会奏效。

基本上我想编写一个函数,当您单击缩略图时,图像会扩展。我已经把那个部分搞定了,我无法弄清楚当你点击另一个图像时,第一个图像会在新点击的图像扩展时变回缩略图。我希望它有一个动画质量,但我会对基本功能感到满意,也许我可以弄清楚如何自己制作动画。我的图片库位于无序列表中,每个图像都设置为列表项,我正在尝试使用jquery来执行此操作。

提前感谢!!

这是我点击时使图像变大的原因:

$('ul#live li img').click(function() {
    $(this).animate({
        'width': '515px',
        'height':'100%' 
    });
});

我的css:

ul#live li img { 宽度:120像素; 高度:72px; }

就是这样。 现在我想要的是能够点击另一个图像并点击第一个图像回到原来的120px宽度。而已。我不是想把它从流程或任何类型的灯箱中删除。我这样做的方式可能不是最好的方式,我只是在学习和尝试。希望这可以解决问题。

2 个答案:

答案 0 :(得分:1)

可以相当直接地完成。我过去所做的与类似的是给扩展元素一个新的类$(this).addClass('active_element');

然后,您可以添加动画,以便在单击下一个项目时,首先影响.active_element的任何项目 - 运行动画,删除该类,然后为新选择的元素运行效果。

$('ul#live li img').click(function() {
    $('.active_element').animate({

    //close animation goes here

    });
    $('.active_element').removeClass('active_element');

    $(this).animate({
        'width': '515px',
        'height':'100%' 
    });

    $(this).addClass('active_element');

});

这可以写得更整洁,但这是逐步拼写的基本原则。

它很肮脏,但会完成这项工作。

答案 1 :(得分:0)

这是一个非常广泛的问题。您最终可能会编写一大堆代码来执行您认为非常简单的操作。

对于初学者,我建议您使用 jQuery插件。然后你只需做一些最小化的设置和配置,你可以随时挑选它以了解它是如何工作的。

我喜欢一个名为 prettyPhoto 的人,它会像你描述的那样做得更多。如果它不合适,有许多不同的jQuery插件除了处理缩略图,画廊,幻灯片,灯箱和各种可能的组合之外什么都不做。