Question

按下左右箭头时，这不会移动框。如果您能提供帮助，请在评论中发帖。

window.addEventListener("keydown", testkey , false );
var el = document.getElementById("player");
//changes the x position by a value
function changex(num) {
    el.style.left = ((num + el.style.left) + "px");
}
//changes the y position by a value
function changey(num2) {
    el.style.top = ((num2 + el.style.top) + "px");
}
//sets x and y position of box
function setpos(x, y) {
    el.style.left = (x + "px");
    el.style.top = (y + "px");
}
//this returns the key that is pressed
function testkey(e) {
    if (e.keyCode == "37") {
        //left key
        changex(-10);
    }
    else if (e.keyCode == "39") {
        //right key
        changex(10);
    }
}
setpos(0,0);

Answer 1

我看到两个问题：

第一

您正在为字符串添加数值，这会导致连接。例如：
((num + el.style.left) + "px")相当于10 + 0px + px，会产生类似100pxpx的字符串。这不是有效的CSS值。

我建议使用parseInt将现有的样式值从字符串转换为数字：
el.style.left = parseInt(el.style.left) + num + "px";

有关详细信息，请参阅Get a number for a style value WITHOUT the “px;” suffix。

第二

您需要先position该元素，然后才能使用left，right，top或bottom CSS定义。 MDN注意left（例如）只适用于＆＃34;定位元素＆＃34;。

下面，我使用了position:absolute，但任何有效的位置值都可以使用。

有关详细信息，请参阅css “left” not working。

工作示例

＆＃13;

window.addEventListener("keydown", testkey, false);
var el = document.getElementById("player");

function changex(num) {
  el.style.left = parseInt(el.style.left) + num + "px";
}

function changey(num) {
  el.style.top = parseInt(el.style.top) + num + "px";
}

function setpos(x, y) {
  el.style.left = (x + "px");
  el.style.top = (y + "px");
}

function testkey(e) {
  switch (e.keyCode) {
    case 37: changex(-10); break;
    case 38: changey(-10); break;
    case 39: changex(10); break;
    case 40: changey(10); break;
    default:
  }

}

setpos(0, 0);

＆＃13;

#player {
  position: absolute;
}

＆＃13;

<div id="player">test</div>

＆＃13;

Answer 2

在您的//= require jquery.slick //= require initialize和changex()函数中，您尝试在数字和字符串之间进行计算。 changey()以数字形式出现，但num是字符串'0px'。将el.style.left放在parseInt()这样的地方就可以了：

el.style.left

另外，请确保您的el.style.left = ((num + parseInt(el.style.left)) + "px");元素已通过CSS应用player。

密钥代码不能在javascript中工作

2 个答案:

第一

第二

工作示例