射击目标:单击鼠标->保留项目符号Hole.gif

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

本文关键字：保留 项目 符号 gif Hole gt 目标 单击 鼠标 射击      更新时间：2023-09-26

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

我想代码的命令应该在div容器中，在单击位置单击创建div，然后在5秒钟后删除div。

我该如何编写javascript/jQuery代码来实现这一点？

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

小提琴示例

相关文章：