Question

我刚刚发现了一个很酷的效果，我希望在网站上实现。效果可以在这里看到：http://whois.domaintools.com/

正如你所看到的，某种gif跟随着鼠标。我认为这看起来非常酷，我很想知道它是如何制作的。

所以这里有一个问题：如何实现这一点（javascript是优先考虑的）请记住，这种效果只发生在网站的标题内。

Answer 1

它是由javascript制作的。您创建一个canvas元素，javascript在它们之间绘制一些随机定位的点和线。

因为javascript是客户端语言，所以您可以查看源代码。您要查找的文件是there。

Answer 2

如果要使用鼠标移动图像，则需要绑定到mousemove事件。这也是该网站上发生的事情，尽管我认为它比用鼠标移动gif更复杂。

但是如果你想在移动时在光标下面出现一个gif，你可以使用它：

// when mouse enters whatever element you want 
// (in this case the header), create the image
window.addEventListener('mouseenter', function(e) {
    img = document.createElement('img');
    img.src = 'http://path.to.image';
    document.body.appendChild(img);
});

// move image according to mouse position
window.addEventListener('mousemove', function(e) {
    img.style.position = 'absolute';
    img.style.top = e.clientY + 'px';
    img.style.left = e.clientX + 'px';

});

// remove image when mouse leaves element
window.addEventListener('mouseleave', function(e) {
    document.body.removeChild(img);
    img = null;
});

Javascript抽象数字跟随鼠标

2 个答案: