javascript - 制作动态图像跟随鼠标

Question

有这个版本的图像跟随鼠标:

http://jsfiddle.net/BfLAh/1/

我试过让它与这样的动态加载图像一起工作:

var a = new Image();
a.src = 'https://upload.wikimedia.org/wikipedia/commons/6/6a/This_is_a_demo_blue_dot.png';
a.onload = g;

function g(){
    $(document).mousemove(function(e){
        $(a).css({left:e.pageX, top:e.pageY});
    });
}

但它不起作用。我需要它以这种方式工作，因为稍后我也必须在 Canvas 上绘制它。

我想问题是 jQuery 无法通过这种方式找到图像，那么我该如何让它工作呢？

Answer 1

为元素设置id并将其附加到DOM

由于 position : absolute; 是通过 css 应用的，因此在图像元素上应用 id 是必不可少的。

var a = new Image();
a.id = 'image';
a.src = 'https://upload.wikimedia.org/wikipedia/commons/6/6a/This_is_a_demo_blue_dot.png';
$('body').append(a);
a.onload = g;

function g() {
  $(document).mousemove(function(e) {
    $(a).css({
      left: e.pageX,
      top: e.pageY
    });
  });
}

#image {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>