鼠标移动到页面上的图像粘贴

Question

我想为网站创建一个代码，其中图像将跟随光标并将其自身粘贴到鼠标所到之处的页面上。我相信很多人都体验过这种效果，当您的计算机崩溃时，您可以在屏幕上拖动 window，它只会在身后留下一条痕迹。

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
    });
});

到一半了，我只想让Google标志留在页面上，即使鼠标移开这个地方

Answer 1

Updated fiddle

如果你想用坐标（X & Y）控制它，你应该在img样式中添加position:absolute。

CSS :

.logo{
    position: absolute;
}

你可以将img存储在js变量中并在onmousemove函数中克隆它，最后将它附加到正文中。

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
        })
    );
});

希望对您有所帮助。

鼠标移动到页面上的图像粘贴

image paste on page wherever the mouse moves

html

javascript

mousemove