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

通过一些修改，您可以得到想要的结果。一种方法是使用div属性为每个data设置速度。然后你将mover函数应用到每个div，使用它们各自的速度和位置来设置新的速度和测试弹跳。您可以使用setInterval而不是使用setTimeout。像这样：

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。对移动者的调用是在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);调用中进行的，该调用会迭代每个.bouncer { position: absolute; width: 200px; color:white; } .bouncer:nth-child(2) { top: 30px; left: 100px; } .bouncer:nth-child(3) { top: 50px; left: 200px; } div。

$posttags = get_the_tags();
        if ($posttags) {
          foreach($posttags as $tag) {
                $tag_id = $tag->term_id;
                $tag_name = $tag->name;
                $tag_slug = $tag->slug;
          }
        }

        echo "<!-- tag_id: ".$tag_id." -->";
        echo "<!-- tag_name: ".$tag_name." -->";
        echo "<!-- tag_slug: ".$tag_slug." -->";

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

MySql

请参阅小提琴：https://jsfiddle.net/qwLpf1vr/

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

1 个答案: