0

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

我想让徽标在按 WASD 时移动并编写代码，但是出了点问题。

我的 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;      
       }
   });

});

它出什么问题了？

4

3 回答 3

1

我不是 100% 确定它是否是您的问题，但这不是一个合适的选择器：

$('move')

它应该是 .move 或 #move。

于 2013-07-01T15:19:53.973 回答
1

JSFiddle 演示

您需要将该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;
       }
   });

});

于 2013-07-01T15:22:05.017 回答
1

哦终于找到答案了，我的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;
}

谢谢大家的帮助:)

于 2013-07-02T07:18:33.083 回答