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