射击目标：鼠标单击->离开Bullet Hole.gif

Question

我的网站上有一个版块，其中有几个目标对象供访问者点击射击。 我在该部分使用cursor: crosshair 。 我希望这样做，以便当访客在“目标”部分中单击任何位置时，我想留下一个动画的bullet_hole.gif

我猜代码的命令将在div容器中onmouse单击“位置”上的创建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();
    });
}

小提琴的例子