所以我是这个整个javascript的初学者,这可能是一个非常初学的问题。我一直在寻找答案,甚至尝试修改一些基本手风琴的源代码,但它永远不会奏效。
基本上我想编写一个函数,当您单击缩略图时,图像会扩展。我已经把那个部分搞定了,我无法弄清楚当你点击另一个图像时,第一个图像会在新点击的图像扩展时变回缩略图。我希望它有一个动画质量,但我会对基本功能感到满意,也许我可以弄清楚如何自己制作动画。我的图片库位于无序列表中,每个图像都设置为列表项,我正在尝试使用jquery来执行此操作。
提前感谢!!
这是我点击时使图像变大的原因:
$('ul#live li img').click(function() {
$(this).animate({
'width': '515px',
'height':'100%'
});
});
我的css:
ul#live li img { 宽度:120像素; 高度:72px; }
就是这样。 现在我想要的是能够点击另一个图像并点击第一个图像回到原来的120px宽度。而已。我不是想把它从流程或任何类型的灯箱中删除。我这样做的方式可能不是最好的方式,我只是在学习和尝试。希望这可以解决问题。
答案 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插件除了处理缩略图,画廊,幻灯片,灯箱和各种可能的组合之外什么都不做。