gpt4 book ai didi

javascript - 如何通过箭头键 jquery 移动 img

转载 作者:太空宇宙 更新时间:2023-11-04 13:50:41 25 4
gpt4 key购买 nike

我想使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com