如何用按钮控制弹跳div的移动

Question

我正在尝试创建一个控制div的弹跳动作的按钮。在默认位置， 空间 div应形成静态单行。

按下按钮后，div应恢复在容器内弹跳。

JsFiddle

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

Answer 1

您可以使用clearInterval()功能停止移动。

请参阅 fiddle example 。

＆＃13;

＆＃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]);
  });
};
$htmlBack = $('.bouncer').clone();
moveInterval = setInterval(moveIt, 50);
$('button').on('click', function(){
  if( moveInterval != 0){
    clearInterval(moveInterval);
    $('.bouncer').remove();
    $('.bouncyHouse').eq(0).append($htmlBack);
    $htmlBack = $('.bouncer').clone();
    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.1.1/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;

＆＃13;

＆＃13;