如何使用Jquery添加多个不同起点的弹跳div？

Question

这是我目前的进展:

这是我目前的进展:

var vx = 3;
var vy = 2;

function hitLR(el, bounding) {
    if (el.offsetLeft <= 0 && vx < 0) {
        console.log('LEFT');
        vx = -1 * vx;
    }
    if ((el.offsetLeft + el.offsetWidth) >= bounding.offsetWidth) {
        console.log('RIGHT');
        vx = -1 * vx;
    }
    if (el.offsetTop <= 0 && vy < 0) {
        console.log('TOP');
        vy = -1 * vy;
    }
    if ((el.offsetTop + el.offsetHeight) >= bounding.offsetHeight) {
        console.log('BOTTOM');
        vy = -1 * vy;
    }
}

function mover(el, bounding) {
    hitLR(el, bounding);
    el.style.left = el.offsetLeft + vx + 'px';
    el.style.top = el.offsetTop + vy + 'px';
    setTimeout(function() {
        mover(el, bounding);
    }, 50);
}

setTimeout(function() {
    mover($('.bouncer')[0], $('.bouncyHouse')[0]);
}, 50);

我正在尝试向这个示例中添加多个div，以便每个div都可以独立地在黑色框中弹跳。理想情况下，每个单词也应该有一个独特的起始位置（不仅仅是在左上角）。

https://jsfiddle.net/86xyxvyn/

- Lily

Answer 1

只需进行一些修改，您就可以获得所需的结果。 一种方法是为每个 div 设置速度，使用 data 属性。 然后，您将 mover 函数应用于每个 div，使用其各自的速度和位置来设置新速度并测试反弹效果。 而不是使用 setTimeout，您可以使用 setInterval。 示例如下：

div class="bouncyHouse">
                <!-- using data-vx and data-vy allows to set different speed for each div--!>
                <div class="bouncer" data-vx='2' data-vy='-3'>
                    <span>space</span>
                </div>
                <div class="bouncer" data-vx='-2' data-vy='2'>
                    <span>space</span>
                </div>
                <div class="bouncer" data-vx='5' data-vy='2'>
                    <span>space</span>
                </div>
            </div>

这段代码与你之前写的几乎一模一样，只是我用了每个数据特定的值替换了每个vx和vy。而且调用mover函数是在一个each()循环中调用的，该循环遍历了每个bouncing div元素。

function hitLR(el, bounding) {
    console.log($(el).data('vx'), $(el).data('vy'))
    if (el.offsetLeft <= 0 && $(el).data('vx') < 0) {
        console.log('LEFT');
        $(el).data('vx', -1 * $(el).data('vx'))
    }
    if ((el.offsetLeft + el.offsetWidth) >= bounding.offsetWidth) {
        console.log('RIGHT');
        $(el).data('vx',  -1 * $(el).data('vx'));
    }
    if (el.offsetTop <= 0 && $(el).data('vy') < 0) {
        console.log('TOP');
        $(el).data('vy', -1 * $(el).data('vy'));
    }
    if ((el.offsetTop + el.offsetHeight) >= bounding.offsetHeight) {
        console.log('BOTTOM');
        $(el).data('vy', -1 * $(el).data('vy'));
    }
}

    function mover(el, bounding) {
        hitLR(el, bounding);
        el.style.left = el.offsetLeft + $(el).data('vx') + 'px';
        el.style.top = el.offsetTop + $(el).data('vy') + 'px';

    }

    setInterval(function() {
        $('.bouncer').each(function(){

            mover(this, $('.bouncyHouse')[0]);
        });
    }, 50);

您可以直接在CSS中设置起始点。

.bouncer {
    position: absolute;
    width: 200px;
    color:white;
}

.bouncer:nth-child(2)
{
    top: 30px;
    left: 100px;
}
.bouncer:nth-child(3)
{
    top: 50px;
    left: 200px;
}

请查看演示：https://jsfiddle.net/qwLpf1vr/

- Julien Grégoire