Javascript 尝试使用jquery在屏幕上移动我的图像_Javascript_Jquery_Html_Css

Javascript 尝试使用jquery在屏幕上移动我的图像

javascript jquery html css

Javascript 尝试使用jquery在屏幕上移动我的图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图让img在屏幕上移动。使用ASDZ，我希望img对jquery输入做出反应。但是，我的代码运行不正常。有人能帮我吗？当我按下ASDW时，图像没有移动 HTML JS 对我来说没问题。我将动画更改为CSS动画，使其更加平滑第一个问题只是为了确保……所显示的css和jquery实际上在head样式表中，并且脚本是正确的？您所说的“我的代码运行不正常”是什么意思？到底是什么不起作用？代码运行得很好。你是说“ASDZ”吗？现在代码设置为对“ASDW”作出反应，我编辑了代码。也许html是错的？

我试图让img在屏幕上移动。使用ASDZ，我希望img对jquery输入做出反应。但是，我的代码运行不正常。有人能帮我吗？当我按下ASDW时，图像没有移动

HTML

对我来说没问题。我将动画更改为CSS动画，使其更加平滑

第一个问题只是为了确保……所显示的css和jquery实际上在head样式表中，并且脚本是正确的？您所说的“我的代码运行不正常”是什么意思？到底是什么不起作用？代码运行得很好。你是说“ASDZ”吗？现在代码设置为对“ASDW”作出反应，我编辑了代码。也许html是错的？

<!DOCTYPE html>
<html>
<head>
    <title>Plane Dodge</title>
    <link rel='stylesheet' type='text/css' href='planegame.css'/>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="planegame.js"></script>
</head>
<body>
    <img src="airplane.png">
</body>
</html>

img {
    position: relative;
    left: 0;
    top: 0;
}

body{
    background-image: url("skygrad.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    z-index: -1;
}

$(document).ready(function () {
    $(document).keydown(function (key) {
        switch (parseInt(key.which, 10)) {
        case 65: //a
            $('img').animate({
                left: "-=10px"
            }, 'fast');
            break;
        case 83: //s
            $('img').animate({
                top: "+=10px"
            }, 'fast');
            break;
        case 87: //w
            $('img').animate({
                top: "-=10px"
            }, 'fast');
            break;
        case 68: //d
            $('img').animate({
                left: "+=10px"
            }, 'fast');
            break;
        default:
            break;
        }
    });
});

transition:all .2s ease-out;