这是我目前所拥有的:
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 独立地围绕黑框弹跳。理想情况下,每个单词也有一个唯一的起始位置(不仅仅是在左上角)。
最佳答案
通过一些修改,您可以获得想要的结果。一种方法是使用 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/
关于javascript - 如何使用 Jquery 添加多个具有不同起点的弹跳 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30771383/