Question

您好，我是网络编程的初学者。我正在“CodeAcademy.com”学习。我正在制作一个小页面来练习我已经学过的东西，但是我的代码出了问题。 Here is the Page

我想在按下W A S D时移动徽标并编写代码，但是出了点问题。

我的HTML

<!DOCTYPE html>
<html>
 <head>
    <link rel="stylesheet" href="style.css" />
    <script src='script.js'></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">     </script>
    <title></title>
</head>
<body>
    <div id='menu'>
        <h3>Header 1</h3>
        <div><p>The jQuery UI library bestows on us a lot of magic, including the datepicker widget. We saw how to use that in the date picker project, but with our knowledge of JavaScript, we can add all kinds of bells and whistles.</p></div>
        <h3 id='h3'>Header 2</h3>
        <div id="move"><img src="http://www.gravatar.com/avatar/9aba2f4a04dbccedb70a93033b55b166?d=retro&s=140"/></div>
        <h3>Header 3</h3>
        <div><img id='2' src="http://www.gravatar.com/avatar/9aba2f4a04dbccedb70a93033b55b166?d=retro&s=140"/></div>
    </div>   
</body>

和我的JS。

$(document).ready(function() 
{
    $('#menu').accordion();
    $('#2').draggable();
    $('#move').keydown(function(key)
    { 
    switch(parseInt(key.which,10)) 
       {
            case 65:
        $('#move').animate({left: "-=10px"}, 'fast');
        break;
    case 83:
        $('#move').animate({top: "+=10px"}, 'fast');
        break;
    case 87:
        $('#move').animate({top: "-=10px"}, 'fast');
        break;
    case 68:
        $('#move').animate({left: "+=10px"}, 'fast');
        break;
    default:
        break;      
       }
   });

}）;

它出了什么问题？

Answer 1

我不是100％确定你的问题，但这不是一个合适的选择器：

$('move')

它应该是.move或#move。

Answer 2

JSFiddle Demo

您需要将keydown函数绑定到文档body标记。

因此您需要用

替换当前代码

$('body').keydown(function(key){

并将您的case声明更改为：

switch(parseInt(key.which)) {

所以你的完整代码应该是：

$(document).ready(function () {

   $('body').keydown(function (key) {

       switch (parseInt(key.which)) {
           case 65:
               $('#move').animate({
                   left: "-=10px"
               }, 'fast');
               break;
           case 83:
               $('#move').animate({
                   top: "+=10px"
               }, 'fast');
               break;
           case 87:
               $('#move').animate({
                   top: "-=10px"
               }, 'fast');
               break;
           case 68:
               $('#move').animate({
                   left: "+=10px"
               }, 'fast');
               break;
           default:
               break;
       }
   });

}）;

Answer 3

OH终于找到了答案，我在CSS代码中遇到了问题，我应该已经做了一些对象的位置：相对。

h3{
border:2px solid black;
border-radius:5px;
background-color: #8C001A;
margin-bottom:0;
}
body{
background-color:#800517;   
}
#menu div{
border-radius:5px;
background-color: #C11B17;
position:relative;
}

#profile{
background-color: #7D0552;
height: 200px;
}
#move{
position:relative;
}

感谢大家的帮助：）

如何使用JQuery keyDown移动图片？

3 个答案: