你如何使照片跟随你的鼠标指针与jQuery的？

我发现拖放困难（您知道，在移动时保持鼠标按钮被按下），并且想要提供“选择和放下”，其中用户点击图标并再次在制图板上点击以放下相应的元素（图片）。你如何使照片跟随你的鼠标指针与jQuery的？

你怎么用jQuery来做到这一点？

谢谢。

编辑：我有两个div，一个可以选择元素的图标板和一个放置图片的绘图板。当鼠标进入绘图板时，我想让大图像的50％不透明度跟随鼠标指针，这样用户就可以通过点击它将要被放下的位置以及它与绘图板上已有的任何东西重叠来知道。

答案（使用詹姆斯黑色的帮助）是：

HTML

<div id="sketch"></div> 
    <img src="cat.jpg" class="follow" style="position: absolute;"/>

JQuery的

$("#sketch").mousemove(function(e){ 
     $('.follow').css({'top': e.clientY - 20, 'left': e.clientX - 20}); 
});

Jsbin演示here。

2009-11-05 03:40:21

感谢您的支持：刚刚帮助我了不起！ – uotonyh 2011-07-12 00:22:24

好答案@Majid。但请注意，您也可以将对象传递给.css（）函数，而不是多次调用它。例如：$（'。follow'）。css（{'top'：e.clentY，'left'：e.clientX}）; – AndyPerlitch 2012-12-10 17:37:19

@AndyPerlitch，谢谢！我更新了使用对象的答案，并对'.css（）'进行了一次调用。 – 2012-12-14 08:50:27

只需将元素存储在点击事件可访问的某个变量中即可。

因此，有充分的图像上一个onclick：$('img').bind('click', function(e) { ... }); 然后，当他们点击，只存储targetEvent某处，并绑定一个click事件绘图板。

一个有趣的方法是使用闭包并绑定该特定的targetEvent，以便在点击画板时知道哪一个要移动，但只要你知道，那么你就会使用动画将img移至新位置。

我忘记了，您还需要确保在点击图像时，已经在绘图板上的事件处理程序在绑定新图像之前被移除。

2009-11-05 01:52:22

我想这就是在没有框架的情况下在javascript中完成它的方式。我希望能够更轻松地利用jQuery的力量。此外，你点击图标，但你放下图像，他们是不一样的。 – 2009-11-05 01:58:08

jQuery使这件事变得更容易，因为它抽象出了使其跨平台的许多工作。如果只需要不到30分钟，我自己就可以实现，这将很容易实施。如果您点击图片，点击图片后，您可以将img克隆或移动到正确的位置，就像使用DnD完成一样。 – 2009-11-05 02:03:05

整个想法是当图像位于绘图板中时，使图像跟随鼠标指针。克隆放在盘子上的图像不是问题。 – 2009-11-05 02:07:40

回答