Tir cibles: Sur un clic de souris -> Leave Bullet Hole.gif

Question

J'ai une section sur mon site Web qui a plusieurs cibles d'objectifs pour les visiteurs cliquez pour tirer sur. J'utilise cursor: crosshair pour la section. Je veux faire en sorte que lorsque mon visiteur clique partout dans la section cibles que je veux laisser un message animé bullet_hole.gif

Je suppose que la commande le code serait à l'intérieur div conteneur onmouse cliquez sur créer un div au clic Localisation puis supprimez div après 5 secondes.

Comment écrire le code javascript/jQuery pour cela?

Answer 1

Pour obtenir l'emplacement du clic dans un conteneur, vous pouvez obtenir les propriétés offsetX et offsetY de l'objet d'événement transmis au gestionnaire de clic jQuery. Vous pouvez ensuite créer un div absolument positionné à cette position qui contient l'image du trou de balle à afficher. De là, vous pouvez utiliser une minuterie pour supprimer ce div après 5 secondes. Quelque chose comme ceci:

$('#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