jquery - 在特定的坐标上添加图像

Question

是否有可能使用jquery在div内点击的位置添加图像？

我需要开发一个小游戏，主要涉及通过点击屏幕来猜测的位置 - 无论用户点击一个图像被放置...

我知道如何让X的地方& Y坐标是被点击 - 但不知道如何将图像放置在该位置...

任何帮助将被完全接受！

干杯 保罗

Answer 1

那么当你创建你的形象使其position:absolute并设置top和left属性的点击坐标确保格设置为position: relative。事情是这样的：

$('#yourdiv').append( 
    '<img src="/path/to/your/image.jpg" 
    style="width:auto;height:auto;position:absolute; 
      left:' + yourxcoord + ';top:'+ yourycoord +'" />"); 

Answer 2

从这里你可以查看一个简单的例子http://jsfiddle.net/qA2jV/

的jQuery：

$(document).click(function(e){ 
    $(".foo").remove() 
    $("body").append("<span class='foo'/>") 
    $(".foo").css("left",e.pageX) 
    $(".foo").css("top",e.pageY) 
}) 

CSS：

.foo{ 
    background-image:url("https://s-static.ak.facebook.com/rsrc.php/v1/ym/r/9vuAQCVid3f.png"); 
    background-repeat:no-repeat; 
    display:inline-block; 
    position:absolute; 
    height:16px; 
    width:16px; 
}