我想使用 jQuery 通过箭头键移动 IMG。我不知道如何在文档上使用方法。不知道在switch语句的方法末尾要不要加括号。
<html>
<head>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script>
function moveIMG(event) {
var x = event.keyCode;
switch(x) {
case 37:
doLeft;
break;
case 38:
doTop;
break;
case 39:
doRight;
break;
case 40:
doBottom;
break;
}
}
function doTop() {
$("div").animate({top: '+=100px'},1200);
}
function doBottom() {
$("div").animate({bottom: '+=100px'},1200);
}
function doLeft() {
$("div").animate({left: '+=100px'},1200);
}
function doRight() {
$("div").animate({right: '+=100px'},1200);
}
</script>
</head>
<body onkeydown="myFunction(event)">
<div id="animateimg" style="position:absolute"><img src="black.png"></div>
<script>$(document).moveIMG()</script> <!-- I think in this place the problem -->
</body>
</html>
最佳答案
尝试使用
$(document).on("keydown", moveIMG)
并添加缺少的括号，如 doLeft();
function moveIMG(event) {
var x = event.which; // use which instead in jQuery
switch (x) {
case 37:
doLeft(); // Add parens
break;
case 38:
doTop();
break;
case 39:
doRight();
break;
case 40:
doBottom();
break;
}
}
function doTop() {
$("div").animate({
top: '+=100px'
}, 1200);
}
function doBottom() {
$("div").animate({
bottom: '+=100px'
}, 1200);
}
function doLeft() {
$("div").animate({
left: '+=100px'
}, 1200);
}
function doRight() {
$("div").animate({
right: '+=100px'
}, 1200);
}
$(document).on("keydown", moveIMG);<div id="animateimg" style="position:absolute">
<img src="//placehold.it/50x50/000">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>开关一团糟。
由于个人喜好，我不喜欢 switch 语句，这是我的建议。通过使用预定义的对象文字来存储映射到 keyCode 整数的移动:
var keyMoves = {
37: {left: '-=100px'},
38: {top: '-=100px'},
39: {left: '+=100px'},
40: {top: '+=100px'},
};
function moveIMG (ev) {
ev.preventDefault();
$('div').stop().animate(keyMoves[ev.which], 1200);
}
$(document).on('keydown', moveIMG);<div style="position:absolute"><img src="//placehold.it/50x50/000"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> http://api.jquery.com/on/
https://api.jquery.com/stop/
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics
关于javascript - 如何通过箭头键 jquery 移动 img，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49373214/