使動態圖像追隨鼠標

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}); 
    }); 
} 

但它不起作用。我需要它以這種方式工作，因爲我將不得不在畫布上繪製它。

我想問題是，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>