Javascript 使用jQuery左右移动图像_Javascript_Jquery_Html_Image

Javascript 使用jQuery左右移动图像

javascript jquery html image

Javascript 使用jQuery左右移动图像,javascript,jquery,html,image,Javascript,Jquery,Html,Image,好的，这是更新后的代码和工作代码。使图像具有相对性就成功了。现在唯一剩下的就是，只要我把手指从钥匙上拿开，我就想让图像停止移动。我该如何正确使用钥匙 <html> <head></head> <body> <img id="pic" src="run0.png" alt="image" height="100" width="100" style="position: relative;"/> <script s

好的，这是更新后的代码和工作代码。使图像具有相对性就成功了。现在唯一剩下的就是，只要我把手指从钥匙上拿开，我就想让图像停止移动。我该如何正确使用钥匙

<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>


$（文档）.keydown（函数（事件）{
var keycode=（event.keycode？event.keycode:event.which）；
如果（键代码=='39'）{
$（“#图”）。制作动画({
左：'+=10px'，
});
}
});

我还希望不必首先使用HTML在文档上添加图像，而只需从Javascript/jQuery将其附加到文档中。如果有人能帮我使用纯Javascript，我将不胜感激。

按键无法检测到箭头键。阅读：

同样，left属性也会影响图像。。它应该绝对地放在页面中。下面是一个示例演示：

HTML:

JS:

首先，正如评论中所说，修复语法错误

然后你想用CSS属性

left

为你的图片制作动画，这是CSS

位置的一部分。如果你把它添加到你的图像中，它应该会起作用（我刚刚用了a
的keycode97
，因为我不知道39
是什么）：
HTML:
<img id="pic" src="run0.png" alt="image" height="100" width="100" />

#pic {
    position: absolute;
    left: 20px;
}

$(document).keypress(function (event) {
    // var keycode = (event.keyCode ? event.keyCode : event.which);

    console.log(event.keyCode);
    if (event.keyCode == '97') {
        $("#pic").animate({
            left: '+=5px',
        });
    }
});

jQuery:
<img id="pic" src="run0.png" alt="image" height="100" width="100" />

#pic {
    position: absolute;
    left: 20px;
}

$(document).keypress(function (event) {
    // var keycode = (event.keyCode ? event.keyCode : event.which);

    console.log(event.keyCode);
    if (event.keyCode == '97') {
        $("#pic").animate({
            left: '+=5px',
        });
    }
});

请参阅jsiddle:
尝试向图像添加相对位置：
<img id="pic" src="run0.png" alt="image" height="100" width="100" style="position: relative;"  />


这里有语法错误：（索引）：27未捕获的语法错误：缺少）在参数列表之后
在var-keycode=…
行之后，有一个随机结尾的大括号。你更快了。。。我将删除我的答案，使位置相对做了诀窍。从阅读链接中的内容来看，keypress似乎只适用于某些浏览器，而keypup/down更为通用。（请参阅我的编辑）只需在关键点时停止动画即可。这使它工作正常，谢谢！：）当我的代表15岁时，我会回来给你一分！