3

Вопрос по jquery, javascript – Отражать объекты, когда мышь рядом

У меня есть несколько элементов span в случайных позициях, заключенных в родительский div с именем «.background». Они генерируются с помощью Javascript. Как это:

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

Я хочу, чтобы они удалялись (или отталкивались), когда мышь приближалась, но я понятия не имею, как это сделать! Как мне сделать это в jQuery?

Я полагаю, что вам придется искать пролеты, которые были рядом, и затем менять их положение, если они находились внутри определенного радиуса, окружающего мышь, но я действительно не знаю, с чего начать. Любая помощь приветствуется!

  • Error: User Rate Limit ExceededperfectError: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceeded

    от
  • 1

    Вы выбираете все объекты с кругом класса с помощью jQuery

    помещаете это в переменную, а затем проверяете движение мыши (также можно сделать с помощью jQuery), просматривая их, если они находятся в определенном радиусе от мыши.

  • 14

    Простой подход состоит в том

    чтобы обернуть каждый промежуток в другой, больший промежуток. Увеличьте его с каждой стороны на минимальное расстояние, на которое вы хотите, чтобы мышь могла приблизиться к внутренним пролетам. Привязать функцию (evade) который перемещает каждую обертку вmouseover на обертках. Этот подход дает квадратную границу, поэтому, если графические элементы во внутренних промежутках не квадратные, расстояние от мыши до границы графического элемента не будет постоянным, но его легко реализовать.

    В качестве альтернативы, используйте бампер для грубой проверки на близость. Вместо привязки функции уклонения кmouseover, связать функцию (beginEvade) который связываетevade на ходу мыши. Кроме того, привязать функцию кmouseout что отвязываетevade, Вашevade Затем можно выполнить более точный тест на близость.

    Во-первых, найдите хорошую библиотеку геометрии, которая предоставляет векторный тип. В отсутствие такового, вот пример реализации:

    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());
        }
    };
    

    Затем, образец круговой функции уклонения (которую проще всего реализовать). Контур:

    calculate the bumper's center (the bumper's corner plus the outer dimensions divided in half) calculate the mouse offset vector (from the mouse cursor to the element's center) proximity test: if the distance is >= the minimum allowed distance, then return early. calculate delta: The distance to the mouse cursor is too small, so we need the vector from where the bumper is to where it should be (the delta). Lengthening the offset vector so it's the minimum allowed distance gives where the bumper's center should be, relative to the mouse's position. Subtracting the offset vector from that gives the delta from the proximity edge to the mouse, which also happens to be the delta. calculate new position: add the delta to the current position. bounds checking: keep all borders of the circle within the document. move the bumper

    В коде:

    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);
    }
    

    После этого все, что осталось, это функции для привязки / отмены привязки.evadeи звонки, чтобы все настроить.

    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);
    });
    

    Вы можете просмотреть это вjsFiddle