javascript - 鼠标所到之处产生效果

Question

所以我一直在无休止地尝试做一些与该网站正在做的事情类似的事情 (http://whois.domaintools.com/)。我正在尝试获取一个网页，所以无论鼠标在网页上移动到哪里，那种效果都会随之而来(抱歉，我不知道我会怎么称呼这种效果)。

我已经阅读了如何在这里提问，但我不知道要寻找什么，所以我很难尝试这样做。到目前为止，这个链接 ( http://p5js.org/learn/demos/Hello_P5_Drawing.php ) 我已经使用了这里的代码并尝试了一下，但我也很困惑我将如何去做。

感谢您的帮助，这几天我一直在用头撞砖墙。

Answer 1

这似乎是某种粒子系统。我将从以下方式开始:首先为一个粒子创建一个类，它应该有一个随机的 x 和 y 坐标，并且它应该定期将它的位置更改为一个随机的新位置。然后创建粒子的许多实例并将它们分布在页面上。

http://jsfiddle.net/aggoh0s1/3/

/* each particle will move in a 100px100px square */
var gutterWidth = 100;

/* class definition */
var Particle = function(x, y) {
    var t = this;
    t.x = x;
    t.y = y;

    t.elem = $('<div class="particle" />');
    t.elem.css({ left: x+"px", top: y+"px"});

    $('body').append(t.elem);

    /* create a new position every 500-1000 milliseconds */
    var milliSecs = 500 + Math.random() * 500;
    t.ptinterval = setInterval(function() {
        var dx = Math.round(Math.random() * gutterWidth);
        var dy = Math.round(Math.random() * gutterWidth);
        t.elem.animate({left: (t.x + dx)+"px", top: (t.y + dy) + "px"}, 600);  
    }, milliSecs);
};




/* create a 1000px1000px area where particles are placed each 100px */
var particles = [];
var newParticle;

for(var x = 0; x < 1000; x = x + gutterWidth) {
    for(var y = 0; y < 1000; y = y + gutterWidth) {
        newParticle = new Particle(x,y);
        particles.push(newParticle);
    }
}

CSS:

.particle {
    width: 2px;
    height: 2px;
    background-color: black;
    position: absolute;
}

使用此逻辑，您还可以使用 canvas 来显示粒子，而不是像在 whois.domaintools.com 上那样使用 html div。下一步应该是用线将粒子彼此连接起来，然后一些代码应该隐藏所有距离鼠标位置一定距离的粒子。