我有 4 个并排放置的小缩略图图像,当点击每个缩略图时,它们下方的小 div/面板会显示不同的文本。

单击图像时,我希望它们按被单击到最左侧的图像重新排序。 因此,如果单击下面的 2:

1 2 3 4

它应该成为

2 1 3 4

理想情况下是滑动的,我发现了很多 Jquery UI 插件来显示滑动 carasols 等,但没有一个可以重新排序图像,有没有人知道?

谢谢

#1楼 票数:5

干得好。 :D

http://jsfiddle.net/rNzf7/

 $(document).ready(function() { var x = 100; $('img').each(function() { $(this).css("left",x+"px"); $(this).css("background-color", "rgb(0,90,"+x+")"); x += 55; }); }); $('img').click(function(e) { $(e.target).animate({ left: "100" }); $(e.target).siblings().each(function (){ if ( $(this).position().left < $(e.target).position().left ) { $(this).animate({ left: "+=55" }); } }); });

#2楼 票数:1

为什么不使用 Jquery UI Sortable > http://jqueryui.com/demos/sortable/#display-grid通过拖放重新排序它们

#3楼 票数:0 已采纳

这就是您要寻找的(尼尔注意到没有滑动)。

$('img-selector').click(function(){
  $(this).parent().prepend(this);
});

丰富多彩的演示在http://jsfiddle.net/gaby/Lu5Q8/

  ask by See translate from so

未解决问题?本站智能推荐:

1回复

全屏图像滑块与jQuery

我必须创建一个类似于http://issuu.com/eb_magazine/docs/ebmag_31/1的演示网站。 该网站是用Flash编码的,但是我想使用JavaScript和jQuery进行编码。 我想我需要分两部分来做,首先是一个简单的图像滑块,可以在图像之间滑动。 我想我可以
1回复

如何在Galleria jQuery库中显示原始图像

我希望图像以原始尺寸显示,而不是拉伸。 怎么样? 我该如何禁用它。 知道解决方案的任何人请帮助我。
1回复

我们可以使用jquery调整图像大小吗?

是否可以使用jQuery从url下载图像并物理调整图像大小而无需使用任何服务器端脚本? 我进行了大量搜索,但未找到任何解决方案。
3回复

jQuery-使用dropzones重新排列页面上的元素?

有人遇到过不错的插件或代码,允许您使用drap和drop和dropzones重新排列页面上的元素吗? iGoogle和Windows Live做类似的事情。 很高兴能够拖放和关闭元素-添加新元素。 并将其保留在某个地方,我认为是使用Cookie还是外部数据库? 我看了一下
1回复

jQuery嵌套可排序

我一直在使用b-hind的NestedSortabe ,发现它非常有用,直到我升级到最新的jquery和jquery-ui为止,我猜他们改变了鼠标事件的处理方式或达到这种效果的方式。 指出nestedSortable不再起作用。 所以我的问题是三折 有谁知道jquery的人们是否实
1回复

Jquery可自动排序

我们可以使用在每个li中使用的id或idx在运行时对jquery进行排序。 我希望它在运行时排序 这里是小提琴 。 我希望它自动排序,例如<li id=1>应该首先出现<li id=2>等等。帮助将被欣赏,因为我是新手试图学习jquery。 这是HTML:
1回复

在按钮单击时使用Jquery调整Svg图像的大小

嗨,我看到了使用jquery调整svg图像大小的代码。请参见 $('.resize').resizable({ ghost: true, resize: function( event, ui ) { var width = ui.size.width; var height =
2回复

如何使用滑动,缩放和裁剪操作jquery中图像的大小或位置?

我想模仿facebook横幅图片上传裁剪功能。 目前,他们允许用户上传横幅,但是在保存之前,他们会上下滑动凸轮,直到显示所需的图像部分。 我想这样做,但也可以从左到右缩放和滑动。 我将轴结果存储在db中,并使用溢出隐藏的css设置将图像的一部分隐藏在横幅div之外。 有一个流行的