Question

如何更改此代码jsfiddle，以便按下按钮时，弹跳div会立即停在其轨道上？我有按钮和弹跳div，但他们将设置为停在特定位置。

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);
  } 
});

Answer 1

不是问题。

检查这个小提琴https://jsfiddle.net/ht3xtto3/。

您所要做的就是删除两行。我在小提琴中对它们进行了评论。

卸下：

$('.bouncer').remove();
$('.bouncyHouse').eq(0).append($htmlBack);

这样做会在您单击按钮时停止它们，并在再次单击它时重新启动它们。

希望这有帮助。

最佳，

添

Answer 2

看看这个小提琴https://jsfiddle.net/itzmukeshy7/j38asdh3/：）

＆＃13;

function hitLR(el, bounding) {
  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]);
  });
}

moveInterval = setInterval(moveIt, 50);
$('button').on('click', function(){
	console.log(moveInterval);
	if( moveInterval != 0){
		clearInterval(moveInterval);
    moveInterval = 0;
  } else {
		moveInterval = setInterval(moveIt, 50);
  }
});

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<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>

＆＃13;

如何改变这个javascript以使div停在他们的轨道上？

2 个答案: