境界線/子と親のアニメーションでのみブロックを移動させます

ブロックが親で移動できるようにするにはどうすればよいですか？境界線/子と親のアニメーションでのみブロックを移動させます

これは#borderである親から移動できます。

タイあなたの助けになります。

のjQuery

$(document).ready(function() 
{ 
    $(document).on('keydown', function(e) 
    { 
     switch(e.which) 
     { 
      //Linkse toets 
      case 37: $('#blokje').animate(
      { 
       left: '-=100px' 
      },1000); 
      break; 


      //Rechtse toets 
      case 39: $('#blokje').animate(
      { 
       left: '+=100px' 
      },1000); 
      break; 

      //Onder toets 
      case 40: $('#blokje').animate(
      { 
       top: '+=100px' 
      },1000); 
      break; 

      //Boven toets 
      case 38: $('#blokje').animate(
      { 
       top: '-=100px' 
      },1000); 
      break; 
     } 
    }); 
});

HTML

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Blokje</title> 
      <link href="style.css" rel="stylesheet"> 
      <script src="_js/jquery-1.7.2.min.js"></script> 
      <script src="script.js"></script> 
    </head> 
    <body> 
     <h2>Gebruik de pijltoetsen om het kader te verplaatsen</h2> 
     <div id="border"> 
      <div id="blokje"></div> 
     </div> 

    </body> 
</html>

CSS

#blokje 
{ 
    width: 100px; 
    height: 100px; 

    position: relative; 
    background-color: #FFFF99; 
} 

#border { 
    width: 1000px; 
    height: 600px; 
    border: 1px solid black; 
}

出典

2016-05-27 Ruben De Bruin

あなたはjQueryのposition()方法を利用することができます。

まず、あなたは子要素親への位置を取得できるようになりますposition: relative;これを含めるように#borderのためにあなたのCSSルールを変更します。

今すぐあなたのjQueryのでは、あなたのブロックの現在の位置を保存する必要があります。

var blockPos = $('#blokje').position();//returns an object with the top and left positions

を今必要とされている全てのブロックが境界線の内側にあるかどうかをチェックすることです：

//check top - when the block is going up 
if(blockPos.top > 0){ 
    //animate block 
} 

//check left - when the block is going left 
if(blockPos.left > 0){ 
    //animate block 
} 

//check bottom - when the block is going down 
if((blockPos.top + $('#blokje').height()) < $('#border').height()){ 
    //animate block 
} 

//check right - when the block is going right 
if((blockPos.left + $('#blokje').width()) < $('#border').width()){ 
    //animate block 
}

working JSFiddle

だけ余分ノート：
をイベントとして使用しているため、キーが押された瞬間にブロック位置が取得されます。したがって、キーを押したときにブロックが境界内にあった場合、境界を越えてもアニメーションが継続されます。

したがって、代わりにkeyupを使用する方がよい場合があります。しかし、これはキーストロークごとに1つの動きに制限されています。

出典

2016-05-27 09:48:33 ImClarky

境界線/子と親のアニメーションでのみブロックを移動させます

答えて

関連する問題