5
Bu kod jsfiddle kodunu nasıl değiştiririm, böylece düğmeye basıldığında, zıplayan div'ler parçalarında hemen dururlar? Düğme ve zıplayan div'larım var, ancak belirli bir konumda durmaya ayarlanmışlar.Bu javascript'i, div'ların parçalarında durmasını sağlamak için nasıl değiştiririm?
Html
<div class="bouncyHouse">
<button type="button">Click Me!</button>
<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>
css
.bouncyHouse {
height: 200px;
width: 150%;
background-color: black;
position: relative;
}
.bouncer {
position: absolute;
width: 200px;
color: white;
}
.bouncer:nth-child(2) {
top: 30px;
left: 100px;
}
.bouncer:nth-child(3) {
top: 50px;
left: 200px;
}
javascript
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';
}
function moveIt() {
$('.bouncer').each(function() {
mover(this, $('.bouncyHouse')[0]);
});
};
$htmlBack = $('.bouncer').clone();
moveInterval = setInterval(moveIt, 50);
$('button').on('click', function(){
console.log(moveInterval);
if(moveInterval != 0){
clearInterval(moveInterval);
$('.bouncer').remove();
$('.bouncyHouse').eq(0).append($htmlBack);
$htmlBack = $('.bouncer').clone();
moveInterval = 0;
} else {
moveInterval = setInterval(moveIt, 50);
}
});
üzerinde bir göz var mı? https://jsfiddle.net/mvbs0uu3/ –
Bunu bir cevap olarak yazmalısınız, doğru görünüyor. – jkris
@jkris: bir cevap olarak ekleyerek SO'nun misyonuna iyi uymuyor * "interneti daha iyi bir yer yap" *. Bu soru çok spesifik ve çoktan çözümü olan OP'den başka kimseye yardım etme olasılığı düşük. Ayrıca, JoshCrozier açıkça temsilcisi gerekmiyor. Çözümü yorum olarak vererek, Lily'nin cevabı verirken Lily'nin soruyu silmesine izin veriyor, bu yüzden SO bir daha yardımcı olmayan bir soru almayacaktı. –