点击时使用jquery改变图像的CSS属性

所以我是这个整个JavaScript的初学者，这可能是一个真正的初学者问题。我一直在寻找答案，甚至尝试修改一些基本手风琴的源代码，但它永远不会起作用。点击时使用jquery改变图像的CSS属性

基本上我想写一个函数，当你点击一个缩略图时，图像展开。我已经弄清楚了这部分内容，但是我无法弄清楚如何在点击另一张图片时，第一张图片会回到缩略图，而新点击的图片会展开。我希望有一个动画质量，但我只会对基本功能感到满意，也许我可以自己设计动画。我的图片库是在一个无序的列表中，每个图片都设置为一个列表项目，我试图用jquery来做到这一点。

在此先感谢！

这里就是我已经做有较大的图像，当你点击：

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

我的CSS：

UL＃活利IMG { 宽度：120像素; height：72px; }

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

来源

2011-06-15 Jay

它可以做得相当直接。我已经在具有类似过去所做的就是给扩展元素的新类$(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'); 

});

这可以写得有点整洁，但这是逐步阐明的基本原则。

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

来源

2011-06-15 04:23:56 TH1981

谢谢!!!我知道这会是一件非常简单的事情，我只是没有得到它。这有助于很多！ – Jay 2011-06-15 04:33:02

removeClass需要一个类名，而不是一个CSS选择器。我试图修复它，但我的编辑需要6个或更多字符，唯一需要更改的是删除“。”。在removeClass参数 – dbellizzi 2011-06-15 04:40:22

谢谢dbellizzi - 我已经更新了。 :) – TH1981 2011-06-15 18:12:33

这是一个非常广泛的问题。你最终可能会写一大堆代码来做一些你认为很简单的事情。

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

我喜欢一个叫prettyPhoto它做的东西就像你所描述的加上更多。如果它不合适，有许多不同的jQuery插件除了处理缩略图，画廊，幻灯片，灯箱以及所有可能的组合外，什么也不做。

来源

2011-06-15 03:24:22 Sparky

点击时使用jquery改变图像的CSS属性

回答

相关问题