Javascript 当鼠标靠近时排斥对象

我在一个名为“.background”的父div中有一堆随机位置的span元素。这些都是用Javascript生成的。像这样：

<span class="circle" style="width: 54px; height: 54px; background: #5061cf; top: 206px; left: 306px"></span>

当鼠标靠近时，我希望它们移开（或排斥），但我不知道如何做到这一点！我将如何在jQuery中实现这一点

---

我想你必须搜索附近的跨距，然后如果它们在鼠标周围的某个半径内，就改变它们的位置，但我真的不知道从哪里开始。感谢您的帮助

一个简单的方法是将每个跨度用另一个更大的跨度包裹起来。使每侧的距离变大，以使鼠标能够接近内部跨距的最小距离为准。绑定一个函数（

规避

），将每个包装器移动到包装器上。这种方法为您提供了一个正方形边框，因此，如果内部跨距中的图形元素不是正方形，则从鼠标到图形元素边框的距离将不是恒定的，而是易于实现的

或者，使用保险杠进行粗略的接近测试。在mousemove上绑定一个绑定

规避

的函数（

beginEvade

），而不是将规避函数绑定到

mouseover

。另外，将一个函数绑定到解除绑定的

mouseout

。然后，您的

规避

可以执行更精确的接近测试

首先，找到一个提供向量类型的好的几何体库。如果没有，下面是一个示例实现：

Math.Vector = function (x,y) {
    this.x = x;
    this.y = y;
}
Math.Vector.prototype = {
    clone: function () {
        return new Math.Vector(this.x, this.y);
    },
    negate: function () {
        this.x = -this.x;
        this.y = -this.y;
        return this;
    },
    neg: function () {
        return this.clone().negate();
    },
    addeq: function (v) {
        this.x += v.x;
        this.y += v.y;
        return this;
    },
    subeq: function (v) {
        return this.addeq(v.neg());
    },
    add: function (v) {
        return this.clone().addeq(v);
    },
    sub: function (v) {
        return this.clone().subeq(v);
    },
    multeq: function (c) {
        this.x *= c;
        this.y *= c;
        return this;
    },
    diveq: function (c) {
        this.x /= c;
        this.y /= c;
        return this;
    },
    mult: function (c) {
        return this.clone().multeq(c);
    },
    div: function (c) {
        return this.clone().diveq(c);
    },

    dot: function (v) {
        return this.x * v.x + this.y * v.y;
    },
    length: function () {
        return Math.sqrt(this.dot(this));
    },
    normal: function () {
        return this.clone().diveq(this.length());
    }
};

接下来是一个示例循环规避函数（这是最简单的实现）。大纲：

计算保险杠的中心（保险杠的中心加上被分成两半的部分）

计算鼠标偏移向量（从图元到图元中心）

接近测试：如果距离>=允许的最小距离，则提前返回

计算增量：到鼠标光标的距离太小，因此我们需要从保险杠所在位置到其应该所在位置的向量（增量）。延长偏移向量，使其成为允许的最小距离，可以给出保险杠中心相对于鼠标位置的位置。从中减去偏移向量，将得到鼠标接近边缘的增量，这也恰好是增量

计算新职位：

将增量添加到当前位置

边界检查：将圆的所有边界保留在文档中

移动保险杠

代码：

function evade(evt) {
    var $this = $(this),
        corner = $this.offset(),
        center = {x: corner.left + $this.outerWidth() / 2, y: corner.top + $this.outerHeight() / 2},
        dist = new Math.Vector(center.x - evt.pageX, center.y - evt.pageY),
        closest = $this.outerWidth() / 2;

    // proximity test
    if (dist.length() >= closest) {
        return;
    }

    // calculate new position
    var delta = dist.normal().multeq(closest).sub(dist),
        newCorner = {left: corner.left + delta.x, top: corner.top + delta.y};

    // bounds check
    var padding = parseInt($this.css('padding-left'));
    if (newCorner.left < -padding) {
        newCorner.left = -padding;
    } else if (newCorner.left + $this.outerWidth() - padding > $(document).width()) {
        newCorner.left = $(document).width() - $this.outerWidth() + padding;
    }
    if (newCorner.top < -padding) {
        newCorner.top = -padding;
    } else if (newCorner.top + $this.outerHeight() - padding > $(document).height()) {
        newCorner.top = $(document).height() - $this.outerHeight() + padding;
    }

    // move bumper
    $this.offset(newCorner);
}

---

您可以在

中预览，您可以使用jQuery选择具有类circle的所有对象，将其放入变量中，然后选中mousemove（也可以使用jQuery完成）如果鼠标的某个半径内有一个跨距，则通过循环遍历跨距。

为每个跨距指定一个id，并在执行此操作之前保存所有位置，这样您就不必每次都重新计算。但不必。z索引会导致多个逃避者出现问题。哈哈哈，JSFIDLE玩起来很有趣，我可以想象用它来链接“单击我！”然后就不能了。

function beginEvade() {
    $(this).bind('mousemove', evade);
}

function endEvade() {
   $(this).unbind('mousemove', evade);
}

$(function () {
    // you can also wrap the elements when creating them.
    $('.circle').wrap('<span class="bumper" />')

    $('.bumper').bind('mouseover', beginEvade);
    $('.bumper').bind('mouseout', endEvade);
});