我如何让我的鼠标远离这些颗粒

Question

所以我的网站上有这些粒子，而且都是Js。但是，我想做的是，当我将鼠标移近它们时，它会与它后面的图像交互导致它们不可点击，从而排斥粒子。

我有下面粒子的代码，body 是黑色的，因为粒子只能在变暗的图像中看到。

function Particle() {
this.path = 'http://files.enjin.com/692771/Particles/';
this.images = ['particle1.png', 'particle2.png', 'particle3.png', 'particle4.png'];

//  Randomly Pick a Particle Model
    this.image = this.images[randomInt(this.images.length)];
    this.file = this.path + this.image;

//  Create a Particle DOM
    this.element = document.createElement('img');

    this.speed().newPoint().display().newPoint().fly();
};

//  Generate Random Speed
Particle.prototype.speed = function() {
    this.duration = (randomInt(10) + 5) * 1100;

    return this;
};
//  Generate a Random Position
Particle.prototype.newPoint = function() {
    this.pointX = randomInt(window.innerWidth - 100);
    this.pointY = randomInt(window.innerHeight - 100);

    return this;
};
//  Display the Particle
Particle.prototype.display = function() {
    $(this.element)
        .attr('src', this.file)
        .css('position', 'absolute')
        .css(' pointer-events', 'none')
        .css('top', this.pointY)
        .css('left', this.pointX);
    $(document.body).append(this.element);

    return this;
};

//  Animate Particle Movements
Particle.prototype.fly = function() {
    var self = this;
    $(this.element).animate({
        "top": this.pointY,
        "left": this.pointX,
    }, this.duration, 'linear', function(){
        self.speed().newPoint().fly();
    });
};

function randomInt(max) {
//  Generate a random integer (0 <= randomInt < max)
    return Math.floor(Math.random() * max);
}

$(function(){
    var total = 50;
    var particles = [];

    for (i = 0; i < total; i++){
        particles[i] = new Particle();
    }
});

Answer 1

以下不是您要求的解决方案...但它无论如何都能解决您的问题:)

改变一个 JS 函数，像这样：

//  Display the Particle
Particle.prototype.display = function() {
    $(this.element)
        .attr('src', this.file)
        .attr('class', 'ParticleNoMouse')
        .css('top', this.pointY)
        .css('left', this.pointX);
    $(document.body).append(this.element);
    return this;
};

... 并将其添加到您的 CSS-文件中：

.ParticleNoMouse {
    position:absolute;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    pointer-events:none;
}

我如何让我的鼠标远离这些颗粒

How Do I Repel My Mouse From These Particles

javascript

jquery

particles