如何使用jquery使图片跟随鼠标指针? [英] How do you make a picture follow your mouse pointer with jquery?

问题描述

我发现拖放操作很困难(您知道在移动时按住鼠标键不放)，并希望提供一种选择和拖放"功能，用户可以在其中单击图标，然后再次在绘图板上单击以进行选择.放下相应的元素(一张图片).

I find drag-and-drop difficult (you know, keeping the mouse button depressed while moving), and want to offer a 'select and drop' where a user clicks on an icon and clicks again on the drawing-plate to drop the corresponding element (a picture).

您如何使用jquery做到这一点?

How do you do that with jquery?

谢谢.

我有两个div，一个用于选择元素的图标板和一个用于放置图片的绘图板.当鼠标进入绘图板时，我希望较大的图像具有50％的不透明度，以便跟随鼠标指针，以便用户通过单击要放置的位置以及它是否与绘图板上已有的任何内容重叠来知道.

I have two divs, an icons plate to select elements from, and a drawing plate where pictures are dropped. When the mouse enters the drawing plate I want a 50% opacity of the bigger image follow the mouse pointer so that the user knows by clicking where it is going to be dropped and if it overlaps with anything already on the drawing board.

推荐答案

答案(在詹姆斯·布莱克的帮助下)是:

The answer (using James Black's help) is:

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演示此处.

这篇关于如何使用jquery使图片跟随鼠标指针?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！