Question

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

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

提前感谢!!

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

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

我的css：

ul＃live li img { 宽度：120像素; 高度：72px; }

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

Answer 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');

});

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

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

Answer 2

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

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

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

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

2 个答案: