javascript - 如何使用 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);

https://jsfiddle.net/86xyxvyn/

我正在尝试向该草图添加多个 div，以便每个 div 独立地围绕黑框弹跳。理想情况下，每个单词也有一个唯一的起始位置(不仅仅是在左上角)。

Answer 1

通过一些修改，您可以获得想要的结果。一种方法是使用 data 属性为每个 div 设置速度。然后将 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>

js。这几乎与您所拥有的完全相同，只是我用每个特定的数据替换了每个 vx 和 vy 。对移动器的调用是在 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;
}

参见 fiddle :https://jsfiddle.net/qwLpf1vr/