Question

function docReady()
{
    image = document.getElementById("someImage");
    window.addEventListener("keydown", moveImage);
}

function moveImage(e)
{
    if (e.keyCode == 37)
        image.style.left = parseInt(image.style.left) - 5 + 'px';

    if (e.keyCode == 38)
        image.style.top = parseInt(image.style.top) - 5 + 'px';

    if (e.keyCode == 39)
        image.style.left = parseInt(image.style.left) + 5 + 'px';

    if (e.keyCode == 40)
        image.style.top = parseInt(image.style.top) + 5 + 'px';

    console.log(image.style.left + ', ' + image.style.top);
}

所以上面的代码应该移动一个图像。但事实并非如此。控制台返回image.style.left和image.style.top的空格。你能帮我解决一下吗？

P.S。如果你会如此善良，你是否也可以这样做，如果图像在屏幕边框上它会停止移动？非常感谢你！

Answer 1

你确实错过了一些步骤。

确切地说，你应该：

在函数外部创建变量image（即，将其声明为全局）
设置top，left
将元素的位置设置为absolute。默认值为static，它不支持使用上/左/右/下移动/样式。
在页面加载上调用整个内容

以下是您按照上述步骤获得的内容：

window.onload = docReady;
var image;

function docReady() {
    image = document.getElementById("someImage");
    window.addEventListener("keydown", moveImage);
    image.style.left = 0;
    image.style.top = 0;
}

function moveImage(e) {
    if (e.keyCode == 37)
        image.style.left = parseInt(image.style.left) - 5 + 'px';

    if (e.keyCode == 38)
        image.style.top  = parseInt(image.style.top)  - 5 + 'px';

    if (e.keyCode == 39)
        image.style.left = parseInt(image.style.left) + 5 + 'px';

    if (e.keyCode == 40)
        image.style.top  = parseInt(image.style.top)  + 5 + 'px';

    console.log(image.style.left + ', ' + image.style.top);
}

#someImage{ 
   position:absolute;
}

<div id = "someImage"> not an image but a test </div>

（为了简单起见，我使用纯文本元素而不是图像，但这无关紧要）

使用箭头键移动元素

1 个答案: