移动孩子的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到右使用箭头键

回答

相关问题