好的，这是更新后的工作代码。使图像相对就可以了。现在唯一剩下的就是当我从键上移开手指时，我希望图像停止移动。我将如何正确使用 keyup？
<html>
<head></head>
<body>
<img id="pic" src="run0.png" alt="image" height="100" width="100" style="position: relative;"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).keydown(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '39'){
$("#pic").animate({
left: '+=10px',
});
}
});
</script>
</body>
</html>
我还希望不必先使用 HTML 将图像放在文档中，而只是将其附加到来自 Javascript/jQuery 的文档中。如果有人可以用纯 Javascript 帮助我做到这一点，我将不胜感激。
最佳答案
按键无法检测到方向键。阅读:Detecting arrow key presses in JavaScript
还有影响图像的 left 属性.. 它应该绝对放置在页面中。 这是一个示例演示:https://jsfiddle.net/6haxsbz9/
HTML:
<img id="pic" src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="image" width="100" />
CSS:
img {
position:absolute;
left:10px;
top:10px;
}
JS:
$(function () {
$(document).keydown(function (event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '39') {
$("#pic").animate({
left: '+=5px',
});
}
});
});
关于javascript - 使用 jQuery 左右移动图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33969366/