如何正確顯示圖像的位置？ jQuery

我想顯示一個圖像準確地在用戶用jQuery點擊..，我試圖達到一定的效果。所以如果他們完全點擊屏幕中間，我希望它出現在屏幕中間。如果他們點擊我要出現在最底層屏幕的最底部（...等...）如何正確顯示圖像的位置？ jQuery

$("div").click(function() { 
     $("img").show(); 
    });

所以啊，這就是我的出發點。我不會遇到問題（如果需要的話）。我想我必須使用鼠標位置xy座標，但我不知道如何將它們連接在一起。

有沒有人有任何想法？

2013-12-14 Oneezy

它只會發生一次，動畫將開始。所以點擊發生後，我需要禁用功能再次發生，直到頁面刷新。 – Oneezy

img { 
    display: none; 
    position: fixed; 
}

然後

$("div").click(function (e) { 
    $("img").css({ 
     top: e.pageY, 
     left: e.pageX 
    }).show(); 
});

演示：Fiddle

2013-12-14 01:30:28

在這種情況下，我quess會更好頂部：e.pageY - $（this）.height（）/ 2等，但它很好，UP :) –

謝謝，我怎麼讓它在點擊後「死」？我只想顯示圖像一次，然後進入其他的東西 – Oneezy

@MrRioku像http://jsfiddle.net/arunpjohny/xe2a7/3/ –

試試這個：

$("div").click(function(event) { 
    $("img").offset({top:event.offsetY, left:event.offsetX}).show(); 
});

這種方法捕獲事件對象，從中提取點擊鼠標的座標，並將其傳遞給jQuery的.offset()方法

UPDATE

因爲你需要這個事件發生只有一次 - 代替使用.click()將onclick事件綁定到您的處理程序 - 使用.one() - 它將執行一次處理程序然後解除綁定事件：

$("div").one('click', function(event) { 
    $("img").offset({top:event.offsetY, left:event.offsetX}).show(); 
});

2013-12-14 01:32:13

謝謝你我的朋友！ – Oneezy

回答