JavaScript使用箭头键移动图像

我见过很多人在这里问类似的问题，但他们似乎都不适合我。我有一个img，id为“character”。我希望它在左键单击时向左移动，右键单击时向右移动。这是我的代码：

var bound = window.innerWidth;
function left(id) {
    document.getElementById(id).style.left.match(/^([0-9]+)/);
    var current = RegExp.$1; 
    if(current <=bound){
        document.getElementById(id).style.left = current - 0 + 'px';
    }
    else{
        document.getElementById(id).style.left = current - 5 + 'px';
    }
}

function right(id) {
    document.getElementById(id).style.left.match(/^([0-9]+)/);
    var current = RegExp.$1;
    if(current >= (bound - 5){
        document.getElementById(id).style.left = current + 0 + 'px';
    }
    else{
        document.getElementById(id).style.left = current + 1 + 'px';
    }
}

document.onkeyup = KeyCheck;       
function KeyCheck() {

    var KeyID = event.keyCode;
    switch(KeyID)
    {
    case 39:
    right('character');
    break;
     case 37:
    left('character');
    break;
    }
}

var-bound=window.innerWidth；
功能左（id）{
document.getElementById（id）.style.left.match（/^（[0-9]+）/）；
var current=RegExp.$1；
如果（当前=（绑定-5）{
document.getElementById（id）.style.left=current+0+'px'；
}
否则{
document.getElementById（id）.style.left=current+1+'px'；
}
}
document.onkeyup=KeyCheck；
函数KeyCheck（）{
var KeyID=event.keyCode；
开关（KeyID）
{
案例39：
右（‘字符’）；
打破
案例37：
左（‘字符’）；
打破
}
}

---

我不知道是否应该修复此代码，或者是否有更简单的方法。如果您有更简单的方法，请告诉我。

您的左函数和右函数步骤不同。请使用一个变量来避免这种情况。示例

 var step = 5;
function left(id) {
    document.getElementById(id).style.left.match(/^([0-9]+)/);
    var current = RegExp.$1; 
    if(current <=bound){
        document.getElementById(id).style.left = current - 0 + 'px';
    }
    else{
        document.getElementById(id).style.left = current - step + 'px';
    }
}

function right(id) {
    document.getElementById(id).style.left.match(/^([0-9]+)/);
    var current = RegExp.$1;
    if(current >= (bound - 5){
        document.getElementById(id).style.left = current + 0 + 'px';
    }
    else{
        document.getElementById(id).style.left = current + step + 'px';
    }
}

var阶跃=5；
功能左（id）{
document.getElementById（id）.style.left.match（/^（[0-9]+）/）；
var current=RegExp.$1；
如果（当前=（绑定-5）{
document.getElementById（id）.style.left=current+0+'px'；
}
否则{
document.getElementById（id）.style.left=current+step+'px'；
}
}

为什么不使用jQuery

$("body").keydown(function(e) {
  var max = $('body').width();
  var min = 0;
  var move_amt = 10;
  var position = $("#my_image").offset();
  if(e.which == 37) { // left
    var new_left = ((position.left-move_amt < min) ? min : position.left-move_amt);
    $("#my_image").offset({ left: new_left})
  }
  else if(e.which == 39) { // right
    var new_left = ((position.left+move_amt > max) ? max : position.left+move_amt);
    $("#my_image").offset({ left: new_left})
  }
});

$（“body”）.keydown（函数（e）{
var max=$（'body'）.width（）；
var min=0；
var move_amt=10；
变量位置=$（“#我的#图像”）.offset（）；
如果（e.which==37）{//左
var new_left=（（position.left-move_amt最大）？最大：位置.左+移动金额）；
$（“#我的_图像”）.offset（{left:new_left}）
}
});

---

这是一个

你的错误是什么？它向左运行很好，但向右运行时，它会像30 px一样跳跃，然后像100 px一样，每次越跳越远。你的左函数和右函数的步骤不同。使用一个变量来避免这种情况谢谢。我完全忘记了这一点。我没有实现边界检查，如果有，请告诉我你需要这方面的帮助。如果你不介意的话，那太棒了。我想我对窗口大小的定义是错误的。我试着做了一个if语句，基本上，如果#img.style.left的值小于整个窗口的宽度，那么它就不会动画，但那不起作用。或者，如果你知道更好的方法，那也很好。我广告ded bounds检查示例和演示。现在我让它根据

body

限制右边界。您可以将其更改为所需的任何容器。问题是

animate

函数移动图像需要一些时间。如果您按住该键，此函数的调用速度会非常快，以至于动画从未被调用过在使用相同的值再次调用之前，需要时间完成。我已更新为直接设置

左

位置，而无需使用任何动画来允许按住按钮