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

Question

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

我猜代码的命令将在 div 容器中 onmouse click 在点击位置创建一个 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

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

Shooting Targets: On mouse click -> Leave Bullet Hole.gif

javascript

jquery

aim

onclick

targets