用左右光标键移动div

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用左右光标键移动div相关的知识,希望对你有一定的参考价值。

我正在尝试使用左侧位置移动div元素。要做到这一点,我平方div,并在javascript中得到他的元素id给它+ -3像素,取决于左右的ley笔画。我添加了控制台日志,知道这些东西正在运行,一切都在流动,唯一的问题是...... IT ISNT正在工作!我不需要新的代码,只是为了理解我做错了什么

html

<html>
    <body>
        <div id="container"> 
            <div id="guy"> </div>
        </div>
    </body>
    <script src="script.js"></script>
    <style>
        #container{background-color: teal;width: 500px;height: 500px;margin: auto; position: absolute;}
        #guy{background-color: black;width: 30px;height: 30px;}
    </style>
</html>     

javascript文件:

var theMan = document.getElementById('guy');
theMan.style.position = "absolute";
xLeft = 0;
function move(e) {
    var e = e.keyCode;
    switch(e) {
        case 37:
            if (xLeft == 0) {
                console.log("Already reached the left edged");
            } else {
                console.log("Pressed LEFT");
                xLeft -= 3;
                moveGuy();
            }
            break;
        case 39:
            if (xLeft == 500) {
                console.log("Already reached the right edged");
            } else {
                console.log("Pressed RIGHT");
                xLeft += 3;
                moveGuy();
                console.log(xLeft);
            }
            break;
        default:
            console.log("Use the cursor keys idiot!");
            break;
    }
}

function moveGuy() {
    theMan.style.left = xLeft + " px";
    console.log("moving");
}

document.onkeydown = move;
答案

你有太多的空间,替换

theMan.style.left = xLeft + " px";
//                          ^^ no space here

theMan.style.left = xLeft + "px";

FIDDLE

我将把我的昵​​称改为“EagleEyes”

以上是关于用左右光标键移动div的主要内容,如果未能解决你的问题,请参考以下文章

代码的快速操作

el-input键盘左右键移动光标位置

vb中怎样通过按下上下左右键移动焦点在文本框中的位置

用JS做一个div以键盘上下左右控制移动

在表格中按上下左右键移动光标

linux系统中vi点击上下左右键后出现ABCD,没有移动光标