image paste on page wherever the mouse moves

问题

I wanted to create a code for a website where an image would follow the cursor and paste itself on the page wherever the mouse would go. I am sure many have experienced this effect, when your computer crashed and you would drag a window around a screen and it would just leave a trail behind itself.

jsfiddle - Example follow mouse

HTML :

<img class="logo" src="//ssl.gstatic.com/images/logos/google_logo_41.png" alt="Google">

JS :

$(document).mousemove(function(e) {
    $('.logo').offset({
        left: e.pageX,
        top: e.pageY + 20
    });
});

This is halfway there, I just want the Google logo to stay on the page, even after the mouse moves away from the place

回答1:

Updated fiddle

You should add position:absolute to img style if you want to control it using coordinate (X & Y).

CSS :

.logo{
    position: absolute;
}

You can store the img in js variable and clone it in onmousemove function, and finally append it to the body.

JS :

$(document).mousemove(function(e) {
    var logo ='<img class="logo" src="//ssl.gstatic.com/images/logos/google_logo_41.png" alt="Google">';

    $("body").append(
        $(logo).clone().offset({
            left: e.pageX,
            top: e.pageY + 20
        })
    );
});

Hope this help.

来源：https://stackoverflow.com/questions/31629992/image-paste-on-page-wherever-the-mouse-moves