Machen Sie ein dynamisches Bild Folge Maus

Question

Es ist diese Version des Bildes folgende Maus:

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

Und ich habe versucht, es wie dies mit einem dynamisch geladenen Bild funktioniert:

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

Aber es funktioniert nicht. Ich brauche es, um so zu arbeiten, da ich es später auf die Leinwand zeichnen muss.

Ich denke, das Problem ist, dass jQuery das Bild auf diese Weise nicht finden kann, also wie kann ich es funktionieren lassen?

Answer 1

Set id an das Element und fügen sie in der DOM

Als position : absolute; wird durch css angewendet, id über Bildelement Anwendung wesentlich ist.

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>