5
このコードを変更するにはjsfiddleボタンを押すと、バウンスするdivがトラック内で直ちに停止するようにしますか？私はボタンとバウンスdivsを持っているが、特定の場所で停止するように設定されています。divsをトラック内で停止させるには、このjavascriptをどのように変更しますか？
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);
}
});
オーバー表情をお持ちですか？ https://jsfiddle.net/mvbs0uu3/ –
あなたは答えとしてそれを置くべきです、それは正しく見えます。 – jkris
@jkris：それを答えとして追加することは、 "インターネットをより良い場所にする" *というSOの使命にはうまく収まりません。問題はあまりにも具体的であり、OP以外の、すでに彼女のソリューションを持っている人を助けることはほとんどありません。その上、ジョシュクロイツェルは明らかに担当者を必要としない。解決策をコメントとして与えることで、JoshはLilyに質問を削除させ、彼女にも答えを与えているので、それほど役に立たない質問は1つも出ません。 –