Question

我有一些小图像，我显示的是图标大小（32x32）。我想在他们点击任何图像时，将它们从页面上的当前位置动画到DIV的x，y。使用jQuery执行此操作的最佳途径是什么？

Answer 1

如果我正确理解了问题，那么您可以将css属性更改为图像属性。即包含div中的图像并将div移动到所单击图标的位置。

$("#divname").css({'width' : '32', 'height' : '32' , 'left' : 'IMAGELEFT', 'top' : 'IMAGETOP'});

假设我理解这个问题。

编辑：

将图像移动到div：

$("#image").click(function(){
  $(".block").animate({'left': 'DIVPOSITION', 'top', 'DIVPOSITION'}, 'slow', function() {
 $("#div").html("<img src=\"THEIMAGE\">");
   });
 );
});

Answer 2

看起来已经有一些jquery plugins能够满足您的需求。

从链接中，CJ Object Scaler应该能够确保您的图像符合指定的大小。 JQUERY IMAGE MAGNIFY通过图像处理动画和透明度。

Answer 3

从我的头顶开始，您可以使用offset（）函数来获取图像和想要图像移动到的div的x和y坐标。 offset（）。left和offset（）。right。

然后我也认为你需要确保图像绝对定位才能正常工作。然后只需在image元素上使用animate（）函数，并在animate（）函数中添加新的x和y位置，以使图像到达那里。

转到docs.jquery.com并阅读animate（）函数需要的参数。

如果你正在努力，我会尝试提出代码示例。

使用jQuery 1.3.x将图像移动到DIV的位置

3 个答案: