如何在各个方向移动元素？

Question

我知道物体可以在页面上的X和Y方向上制作动画，但是如果可以在所有方向制作动画，如下面的黄色方向，请告诉我：

到目前为止，我有一个jquery代码：

 var position = $("#redBox").position();
    switch (e.keyCode)
    {
        case 37:
         $("#redBox").css('left',position.left - 2 +'px');
         break;
        case 38:
         $("#redBox").css('top',position.top - 2 +'px');
         break;
        case 39:
        $("#redBox").css('left',position.left + 2 +'px');
         break;
        case 40:
         $("#redBox").css('top',position.top + 2 +'px');
         break;
    }

这是在X和Y中移动redBox但是如何在推动KEYS（37 + 38）和（39 + 38）时强制它在黄线中移动？

由于

Answer 1

如果你想向上移动+向左移动只做两个。

$("#redBox").css({ 'left': position.left - 2 + 'px', 'top': position.top + 2 + 'px'});

或者像这里的动画：http://jsfiddle.net/jdWRT/

PS。

我从这里偷走了链接：How to move an element in Diagonal Movement in jQuery?

Answer 2

按下箭头键（onkeydown）时，可以为该键设置一个标志。当该键被释放（onkeyup）时，您可以取消设置该标志。这样你就可以随时了解每个键的状态，并且可以测试你的onkeydown处理程序（或其他任何地方）是否按下了任何键组合。

此时你只需要做bobek所说的并同时调整左侧和顶部属性。