移動孩子的div到右使用箭頭鍵

HTML：

<div id="Container" class="Container"> 
<div id="PLayer" class="player" ></div> 
</div>

CSS：

<style type="text/css"> 
.Container 
{ 
    width:200px; 
    height:200px; 
    } 
.player 
{ 
width:10px; 
height:10px; 
background-color:Red; 
position: absolute; 
} 
</style>

JS：

$("body").keydown(function (e) { 

     var KeyID = e.KeyCode || e.which; 
     if (KeyID === 39) //right 
     { 
      $("#Player").animate({ 'right': '20px' }); 
     } 
    });

但球員唐似乎沒有任何建議？

來源

2013-07-13 Sora

它會工作，但使用類選擇。

$(".Player").animate({ 'right': '+=20px' });

如果您有多個將Player作爲類值的div，那麼所有的div都會移動。

來源

2013-07-13 07:27:07

它不適用於大寫的「P」 - 類有小寫的「p」。 – nnnnnn

謝謝你這個完美的答案，但我怎麼做一個測試，以檢查玩家是否超過父級的邊界？ – Sora

您可以通過在執行此行之前檢查條件來執行此操作。你可以像這樣獲得你的parrent div的位置。 var a = $（yourparrentDiv）.position（）因此在此之後，您可以訪問像 a.top或a.ftft –

你應該使它向右移動20像素以上從它的當前位置：

$(".Player").animate({ 'right': '+=20px' });

來源

2013-07-13 07:23:21 Rikky

是的，你是對的:)但現在我想檢查玩家是否超過了它的父分區的邊界我該怎麼辦？ – Sora

你可以閱讀父div的位置，它的大小，然後根據它們，計算出玩家的頂部和左邊的限制。我懶得在這裏做一個演示：P – Rikky

您必須匹配id上的大小寫。您有：

id="PLayer"

和：

$("#Player")

改變元素的id大寫字母「L」爲小寫字母，它會工作：http://jsfiddle.net/V27DZ/1/

...假設你有JavaScript的代碼顯示在元素後面的腳本塊中，或者已將其包裝在文檔就緒處理程序中。

還要注意，通過動畫right屬性，您可以設置距離頁面右側邊緣的距離。如果你打算爲它爲20px只需移動到其當前位置的右側，這樣做，而不是：

$("#Player").animate({ 'left': '+=20px' });

也就是說，加20像素到當前的左側位置。不會傷害到給它太多的初始位置：http://jsfiddle.net/V27DZ/2/

最後要注意，你不必測試e.keyCode因爲jQuery正常化e.which你，但如果你做測試e.keyCode記住，JS是區分sensitve你需要一個小寫的「k」。

來源

2013-07-13 07:33:28 nnnnnn

這樣的位置哦，嘿嘿耶你是對的我修好了，完美的工作 – Sora

移動孩子的div到右使用箭頭鍵

回答

相關問題