射击目标：点击鼠标 -> 离开弹孔.gif

Question

我的网站上有一个部分，其中有几个目标供访问者点击射击。我在该部分使用cursor: crosshair。我想这样当我的访问者点击目标部分中的任何地方时，我想留下一个动画bullet_hole.gif

我猜代码的命令将在 div 容器内单击鼠标单击在单击位置处创建 div，然后在 5 秒后删除 div。

如何编写 javascript/jQuery 代码来执行此操作？

Answer 1

要获取容器内的单击位置，您可以从传递给 jQuery 单击处理程序的事件对象中获取 offsetX 和 offsetY 属性。然后，您可以在该位置创建一个绝对定位的div，其中包含要显示的弹孔图像。从那里您可以使用计时器在 5 秒后删除该 div。像这样的：

$('#target').click(function(e) {
    $('<div />').addClass('bullet-hole').css({
        top: e.offsetY - 5,
        left: e.offsetX - 5
    }).appendTo('#target');
    setTimeout(removeBulletHole, 5000);
});

function removeBulletHole() {
    $('#target .bullet-hole:not(:animated):first').fadeOut(function() {
        $(this).remove();
    });
}

Example fiddle