1

可以说我有这个代码：

<div id="gameFrame">
   <div id="figure"></div>
</div>

数字 div 所在的位置可以说是一个数字的图片。我如何使用 jQuery 来移动 gameFrame 中的图形，键盘键上下左右？

4

2 回答 2

1

看看我的演示：

$(document).keydown(function(e){
    // Left
    if (e.keyCode == 37) { 
      $("#moveMe").animate({marginLeft: "-=100px"}, {queue:false});
       return false;
    }
    // Top
    if (e.keyCode == 38) { 
      $("#moveMe").animate({marginTop: "-=100px"}, {queue:false});
       return false;
    }
    // Right
    if (e.keyCode == 39) { 
      $("#moveMe").animate({marginLeft: "+=100px"}, {queue:false});
       return false;
    }
    // Bottom
    if (e.keyCode == 40) { 
      $("#moveMe").animate({marginTop: "+=100px"}, {queue:false});
       return false;
    }
});

在您的情况下，您需要在每次移动后检查边界，因此图形不会移出框架。

于 2010-11-13T20:12:37.633 回答
0

除了使用键盘之外，您尝试做的事情已经在 jQuery Draggable 模块中完成：http: //jqueryui.com/demos/draggable/#default。您也许可以将他们所做的作为起点。实际代码在这里：https ://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.draggable.js 。

缺点是您可能不得不在扩展/修改代码方面付出相当大的努力，而且它仍然可能依赖于其他 jQuery 代码。

再说一次，您可能会在 jQuery 代码的一小部分中创建一些东西。但是，我想我会发布这个，以防其他人发现任何事情。

如果你想自己做，一般的过程是：

  1. 将要移动的项目包装在容器中（如另一个div），并使用 CSS 将位置设置为相对。
  2. 为箭头键绑定键盘事件
  3. 按下某个键时，修改元素的位置以移动它（CSS 属性，如left和top）
于 2010-11-13T19:54:26.793 回答