Question

所以我一直在努力尝试做一些类似于这个网站正在做的事情（http://whois.domaintools.com/）。我正在尝试获取一个网页，所以无论鼠标在网页上移动到哪里，都会产生这样的效果（对不起，我不知道我会称之为效果）。

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

感谢您的帮助，我已经在砖墙上撞了好几天了。

Answer 1

我为您所指的效果开发了以下解决方案。这是使用jQuery使用事件mousemove()完成的。将此事件绑定到内容所在的身体。

方法：

在您的身体上创建一个包含以下css的元素。您也可以使用jQuery在thefly上创建元素。

<div class='hover'></div>

<强> CSS

.hover{
   position:absolute;
   width:100px;
   height:100px;
   background-color:#fff;
}

将以下代码添加到您的页面。

$('body').mousemove(function(event){
    $('.hover').css({
        'top' : event.pageY,
        'left': event.pageX
    })
});

上面的代码会将事件绑定到鼠标移动，并根据鼠标坐标更改元素位置。

This fiddle shows a running example

我已经向您提供了解决方案的基本概念！你将不得不使用css和jquery来添加你所引用效果的外观和感觉。

Answer 2

参见简单示例

<img id="imgMove" src="Images/img1.jpg" height="100" width="100" style="position: absolute;" />

JQuery

       $(document).ready(function () {

            $(document).mousemove(function (e) {
                $("#imgMove").css({ "top": e.pageY - 50, "left": e.pageX - 50 });  // e.pageX - Half of Image height, width
            })
        })

Answer 3

这似乎是某种粒子系统。我将从以下方式开始：首先为粒子创建一个类，它应该有一个随机的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。下一步应该是将粒子与线相互连接，然后一些代码应该隐藏距离鼠标位置一定距离的所有粒子。

在鼠标移动的地方创建效果

3 个答案: