使用jQuery在点显示图像

Question

我有一个带有点击事件处理程序的图像，用于捕获您点击的位置。

$("#image").click(function(e)
{
    var x = e.pageX - $(this).offset().left;
    var y = e.pageY - $(this).offset().top;
});

我希望它能够在单击图像时在图像顶部的该位置显示图像。我该怎么做？

Answer 1

使用absolute positioning以及top和left CSS属性将图片放在您计算的坐标上。

如果您要定位的图像如下：

<img id="move-me" style="position:absolute;display:none;z-index:99" src="/somewhere.jpg"/>

在您的代码中执行以下步骤：

$('#move-me').css({
   left: x-coord,
   top: y-coord
}).show();

z-index属性可确保图片显示覆盖页面上的所有其他元素...