Mouse Click Trace

4

I need a script, that on a whole page where you click, a ball appears in the place where it was clicked, but after about 2 seconds it disappears.

No need to be ripples, just something that leaves a trace, an example is Google Maps when you click on the map appear white waves to say that you clicked here.

In the place of the ball can also be any image.

    
asked by anonymous 08.03.2014 / 00:03

1 answer

6

You can create an element with absolute positioning, and use pageX and pageY to get the position of the mouse click. Then just put this element in this position:

$(document).click(function(e) {
    $(novoElemento).appendTo("body").css({
        position: "absolute",
        top:e.pageY,
        left:e.pageX
    }).show().delay(2000).hide(0); // O zero é importante, ou o delay não funciona
});

// Alternativa: setTimeout
var bola = $(novoElemento)...
setTimeout(function() {
    bola.hide().remove();
}, 2000);

Example in jsFiddle . (Note: My previous answer suggested clientX and clientY , but this does not work if the content is large enough to show the scroll bar)

    
08.03.2014 / 00:11