-1

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

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

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

4

1 回答 1

2

要获取容器内单击的位置，您可以从传递给 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();
    });
}

示例小提琴

于 2015-12-20T22:16:55.373 回答