Question

我正试图让img在屏幕上移动。使用ASDZ我希望img对jquery输入做出反应。但是，我的代码无法正常运行。谁能帮我这个？按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>

CSS

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

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

JS

$(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;
        }
    });
});

Answer 1

对我来说工作正常。我将动画更改为CSS动画，使其更加流畅。

http://jsfiddle.net/kthornbloom/CLpCj/

transition:all .2s ease-out;

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

1 个答案: