如何准确显示图像的位置？ jQuery的

Question

我想用jQuery显示用户点击的确切位置图片，我正在尝试达到一定的效果。因此，如果他们完全点击屏幕中间，我希望它出现在屏幕中间。如果他们点击屏幕的最底部我想要出现在最底部（...等......）

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

所以，是的，这是我的出发点。我不会有css（如果需要）的问题。我想我将不得不使用鼠标位置x坐标，但我不确定如何将它们组合在一起。

有没有人有任何想法？

http://jsfiddle.net/rM4KY/

Answer 1

img {
    display: none;
    position: fixed;
}

然后

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

演示：Fiddle

Answer 2

试试这个：

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

演示： http://jsfiddle.net/rM4KY/3/

此方法捕获事件对象，从中提取鼠标单击的坐标并将它们传递给jQuery .offset()方法

更新

由于您只需要一次发生 - 而不是使用.click()将onclick事件绑定到您的处理程序 - 使用.one() - 它将执行一次处理程序然后取消绑定事件：

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

演示： http://jsfiddle.net/rM4KY/5/